This can be done with styles.
But you need to understand that you have a Menu then you need to move it from the top to the Sidebar, which you don't have yet.
Well, that is, if this Theme allows, connect the Sidebar on the right side and transfer the Menu to it.
And to make it vertical, just add / change CSS
Main-navigation ul li, .secondary-navigation ul li ( display: block !important; )
Well, after that, you need to change the indents and other properties a little.
Maybe I misunderstood you, but my Max mega menu is already in the left column area (it is black, lined up in 2 lines due to the limited area, and it is horizontal by default in the plugin), I added it there through widgets, in the upper part I have a standard theme menu and I need both of them, now I'll try CSS, thanks
Perhaps I also misunderstood you.
I was talking about the menu that you have on the screen in the horizontal upper block of light green color "Tea Coffee Sweets ..."
But after re-reading your answer, I understand that we are talking about different menus.
On the screen you see on the left side this is the Max mega menu, but I don’t see it on the site at your link.
And because I didn’t see him yesterday either, so I didn’t look at the screen.
Now I don't watch either.
I try to do something all the time, I put and remove different things, until I figured out how to make this menu vertical, I'm looking for another suitable one. For this menu, the same css solution can be applied as you wrote? Could you tell me in which part of the code to insert these lines, in the code of the plugin itself? Does location matter?
I went Plugins-edit-selected Max mega menu, then there are the following sections:
css
megamenu.scss
reset.scss
toggle-blocks.scss
admin
mixin.scss
I did not find similar lines in any of them to fix
I'm just a complete noob and did not understand why you need it to be displayed for me, apparently in order to look at the code and suggest it. I found the admin's answer in the Max Mega Menu support forum that the vertical one is only available in the Pro (paid) version, so for now it will have to be abandoned. Could you please advise any similar plugin, the criteria are as follows:
- the ability to install in the sidebar
- the menu should be dropdown
- when switching to any of the categories, so that it remains open at this stage, and does not close completely with a page refresh
Exactly.
Without seeing this very Menu, it is impossible to give advice and recommendations. It is possible that a couple of lines in CSS are enough. But not a fact.
Although, if you really plan to use this Max Mega Menu revealing all its features, then $23 for such a product is not much at all. It's worth it.
It is widely known that WordPress 3.0 added support for custom menus (custom menus). The thing, in my opinion, is extremely convenient and useful. Actually, that's where this article comes from.
The convenience lies in the fact that now you can create and configure menus directly from the admin panel, adding links by clicking on checkboxes and changing the order of links by simply dragging and dropping. You can add links to pages, categories, and individual posts to the menu. You can create multi-level menus, you can also add your own arbitrary links to the menu, which WordPress does not know about. In general, complete freedom of action.
However, in order for such "freedom" to be available, let's say, with a slight movement of the mouse, you need to set up the output of an arbitrary menu in the template.
Using such menus will be extremely convenient if you use the WordPress multisite feature, because you can set up different menus for different sites, and use one template for them.
Note: the menu works through the (nav_menu) WordPress taxonomy, and arbitrary (external) links are written to the main posts database table. This approach is more flexible and dynamic, but requires the constant generation of such menus.
Register_nav_menus(array("top" => "Top menu", //Name of the menu location in the template "bottom" => "Bottom menu" //Name of another menu location in the template));
We have now registered 2 menus with IDs "top" and "bottom" with their respective names. Identifiers are needed to use them in the theme, to indicate the place where, through the output function wp_nav_menu() , the menu created in the admin panel will be displayed. We will see the names of the registered locations in the admin panel when we go to the Appearance -> Menu section.
After the menus are registered, go to the admin panel and create our own menus (in this example, 2 menus):
- We choose where the menu will be located, since we have registered 2 menus, we will have 2 options: "Top Menu" and "Lower Menu".
Set the name of the menu (the menu in the template can be displayed by the specified name using the wp_nav_menu () function
Creating menu items We use the left block: link pages, headings
Support for custom menus in WordPress is enabled for each theme separately, with this line in the functions.php file add_theme_support("menus"); However, this line is not necessary if we are registering the menu. In this case support will be enabled automatically.
Display custom menus via the wp_nav_menu function
The menus are registered and created, it remains to add them to the template. This is done by the wp_nav_menu() function, which can take the following parameters:
Wp_nav_menu(array("menu" => "", // (string) The name of the displayed menu (specified in the admin panel when creating the menu, takes precedence // over the specified location theme_location - if specified, the theme_location parameter is ignored) "container" => " div", // (string) Menu container. ul wrapper. Container tag is specified (default to div tag) "container_class" => "", // (string) container class (div tag) "container_id" => "" , // (string) id of the container (div tag) "menu_class" => "menu", // (string) class of the menu itself (ul tag) "menu_id" => "", // (string) id of the menu itself ( ul tag) "echo" => true, // (boolean) Display or return for processing "fallback_cb" => "wp_page_menu", // (string) Function to use (fallback) if menu does not exist (failed to get ) "before" => "", // (string) Text before each link "after" => "", // (string) Text after each link "link_before" => "", // (string) Text before the anchor (text) of the link "link_after" => "", // (string) Text after the anchor (text) of the link "depth" => 0, / / (integer) Nesting depth (0 - unlimited, 2 - two-level menu) "walker" => "", // (object) Class that collects the menu. Default: new Walker_Nav_Menu "theme_location" => "" // (string) The location of the menu in the template. (the key is indicated by which the menu was registered in the register_nav_menus function)));
In this example, you need to insert into the template approximately (depending on the parameters you need) the following 2 codes:
#one. Display menu by location
Top Menu. Insert into the template header (header.php), where the top (top) menu will be displayed:
"menu", "theme_location"=>"top", "after"=>" /")); ?>
Displays the menu created in the admin, attached to the "Top Menu" location with a similar structure:
Lower menu. Insert into the footer of the template (footer.php), where the bottom (bottom) menu will be displayed:
Displays the menu created in the admin, attached to the "Bottom Menu" location. The structure will be identical to the first.
Please note that in the first variant, the parameters were passed through an array (array). In the second line. Both options are correct. This is common for WordPress functions - parameters can be passed as an array or as a string (the string is then converted to an array).
#2 Display menu by name
To display a menu by its name, you can use the "menu" argument. The name is indicated, the one that was set when creating the menu in the admin panel. In our example (see picture) "Main menu". The menu argument takes precedence over theme_location , which means that if we display by name, the theme_location parameter will be ignored.
You can specify a menu ID instead of a title. So, if you change the name of the menu, the code will remain working. The menu ID can be viewed in the URL while editing the menu:
Notes
Remove wrapper Div
You may have noticed that the menu is often "wrapped" with an unnecessary div tag. It can be removed by specifying an empty parameter "container"=>"" in the arguments to the wp_nav_menu() function.
Changing the default settings
In order not to constantly specify the same parameter for inserted menus, they can be overridden in functions.php . This is done through the wp_nav_menu_args filter:
Register_nav_menus(array("top" => "Top menu", "bottom" => "Bottom menu")); add_filter("wp_nav_menu_args", "my_wp_nav_menu_args"); function my_wp_nav_menu_args($args="")( $args["container"] = ""; return $args; )
By analogy, you can create your own default arguments: $args["argument"] = "value" .
Checking if a menu is registered
WordPress also has a condition function: has_nav_menu("top") - checks if the top menu location has been registered. If the menu is not specified, then the wp_nav_menu() function will work like wp_list_pages() , but the "wrapper" div will remain, despite the fact that we removed it in the arguments. You can solve this problem like this:
If (has_nav_menu("top"))( wp_nav_menu(array("container" => "", "theme_location" => "top", "menu_class" => "menu")); ) else ( echo "
"; }The menu is the basis of all site navigation. Thanks to the menu, the user can quickly navigate the site and find the information he needs. It can be argued that the site "begins" with a menu, because only this element can give the user an idea of the structure of the Internet resource.
WordPress out of the box offers quite a wide range of options for working with menus. So, the built-in tools allow you to create one or more menus, with any nesting, add arbitrary links there, etc. But often the standard tools are not enough for the site owner to build a menu that meets all his needs.
Mega plugin Max Mega Menu
Usually, theme developers do not provide any advanced settings for customizing the appearance of the menu on the site. For example, hover and click effects, etc. The powerful free plugin Max Mega Menu is designed to expand the website navigation tools and offers the following features for this WordPress user:
- based on the standard WordPress system;
- support for multiple menu areas (each with its own configuration);
- providing convenient drag and drop using Drag&Drop;
- the ability to display WordPress widgets in the menu;
- customize menu styles using the built-in theme editor;
- support for submenu styles;
- support Hover, Hover Intent or Click to open a submenu;
- effects Fade, fade up, slide up or Slide when going to a submenu;
- the ability to add icons to menu items;
- advanced menu item options, including “Hide text”, “Disable Communication”, “Hide on mobile” etc.;
- align menu items to the left or right of the row and parent menu item;
- adaptive design for display on any screen;
- support for different filters/hooks;
- high speed of work;
- detailed documentation and support forum.
Max Mega Menu Setting
First, the plugin needs to be installed and activated. Now let's look at what he can do. To do this, go to the admin section Appearance -> Menu. It should be noted that if your site does not yet have a navigation menu, then create it by adding the necessary items. We talked in detail about how to create a menu on a WordPress site in our previous articles. After that, pay attention to the options block on the left, which is called Max Mega Menu Settings.
In order for the plugin to start working, check the option Included.
Let's take a quick look at each of the settings.
Setting Event determines which event triggers sub-menu items.
Effect responsible for animation appearances and its speed.
In option Topic You can choose menu design. By default, there is only one theme. We'll show you how to create your own below.
Click on it, after which a pop-up window with settings will open in front of you.
The settings window is divided into three tabs.
Tab Mega Menu allows you to determine whether a regular menu or a menu with widgets will be displayed. If the latter is chosen, then in the list Submenu display mode must be specified Mega menu and select the necessary widgets in the adjacent list. If a regular menu is required, then select Drop-down menu.
Tab Settings allows you to customize the menu items. There are text options, links, icons, adaptability and more.
On the tab icon you can set an icon for menu items.
It can be concluded that the settings present in the plugin allow you to flexibly configure each navigation item individually.
Now we should consider more global plugin settings. Max Mega Menu. To do this, go to the admin menu in the section Mega Menu -> Basic Settings. It can be seen that there are all sorts of technical options for the plugin. In principle, they can be left by default. Also here you can set the behavior of the menu when the mouse is clicked, its adaptability, settings css etc.
In chapter Mega Menu -> Themes menu, you can change an existing theme or create a new theme. It can be seen that there is a fairly large number of various settings, including color, size, shadow, animation, padding, orientation for computer and mobile views. Also, if necessary, you can use your own css-regulations. Themes created in this way can be applied in the menu editor.
In chapter Mega Menu -> Menu Locations You will be able to create new areas to place the menu. After creation, you will receive a special PHP-code that allows you to publish areas anywhere on the site, in theme files, as well as a shortcode, thanks to which menu areas can be added directly to posts / pages.
Chapter Mega Menu -> Tools serves to export / import previously created themes, and there are also a few more technical options (cache clearing, complete deletion of all plugin data).
As a conclusion
plugin Max Mega Menu has a huge number of settings, thanks to which you can make an original and colorful navigation on your site.
Please click on one of the buttons to find out if you liked the article or not.
I like 1 Dislike
Reading 8 min. Published on 01.11.2016
Hello! We continue to analyze the most interesting and most useful WordPress plugins! Today you will learn about a super useful plugin that will allow you to create a horizontal drop down menu. You can insert any widgets, text, editor, photo, video, forms, html code into the drop-down menu.
You will be able to fully customize the appearance of the menu and customize the dropdown menu. You can add up to 8 eight columns to the horizontal dropdown menu. You can disable the dropdown menu for mobile devices. A very flexible plugin, you can make a Super Menu!
You can install the Super Plugin directly from the WordPress admin panel. Go to the page: Plugins - Add New , enter the name of the plugin in the search form, press Enter, install and activate the plugin.
General Settings .
– Click Event Behavior, click behavior. Here you have two options to choose from:
- First click will open a sub menu, second click will close the sub menu, the first click opens the submenu, the second click closes the submenu;
- First click will open a sub menu, second click will follow the link, the first click opens the submenu, the second click opens the link.
- Leave the default, don't change anything.
– Mobile Menu Behaviour, behavior on the mobile menu,
- Standard – Open sub menus will remain open until closed by the user, Standard - an open submenu will remain open until the user closes it.
- Accordion – Open sub menus will automatically close when another one is opened, Accordion - open submenus will automatically close when another is open.
– css Output, leave the default, nothing needs to be changed here.
– Menu Item Descriptions, enable or disable description for menu items.
– Active Menu Instances, Some themes will display the menu location multiple times on the same page. For example, your theme might display the menu location after the main menu, then again for the mobile menu. This setting can be used to ensure that the Max Mega Menu only applies to one of these instances.
– .
Menu Themes .
– select theme to edit, this is the menu you will be editing. You can create and select another menu.
– Theme Title, leave the menu theme title as default.
– Arrow, you can select the arrow that is displayed in the menu item with a dropdown menu.
– lineheight, height line.
– Z Index, Z Index can be left as default.
– Shadow, menu shadow can be customized.
– Hover Transitions, enable hover transitions on menu items.
– Reset Widget Styling, disable Mega Menu widget styles.
menu bar .
– MenuHeight, menu height.
– Menu Background, menu background color.
– Menu Padding, menu cover.
– Menu Border Radius, menu border radius.
– Menu Item Align, location of menu items.
– Menu Item Background, background color of menu items.
– Menu Item Background (Hover), menu item background color on hover.
– Menu Item Spacing, menu item spacing.
– Font, font options, color, size, position, family, etc.
– Font (Hover), hover font options.
– Menu Item Padding, padding menu items.
– Menu Item Border, menu item border options.
– Menu Item Border (Hover), menu item border options on hover.
– Menu Item Border Radius, menu item border radius parameters.
– Menu Item Divider, menu separator.
– Highlight Current Item, highlight the current menu item.
Mega menus .
– Panel Background, the background color of the dropdown menu.
– Panel Width, the width of the dropdown menu.
– Panel Padding, upholstery.
– Panel Border, border color and size.
– Panel Border Radius, border radius.
– Item Padding, padding the menu item in the drop down menu.
Widgets .
– header Font, widget title font options in the dropdown menu.
– heading padding, header padding.
– heading margin, padding from the borders of the widget title.
– Header Border, border border settings.
– Content Font, font in the widget content.
Second Level Menu Items .
– Font, font of menu items of the second level.
–Font (Hover), hover font.
– background (Hover), hover background color.
– padding, upholstery.
– margin, indent.
– border, border, border.
Third Level Menu Items . The same settings, only for menu items of the third level.
Flyout menus .
– Menu Background, background color of the drop-down menu of the second or third level.
– Menu Width, menu width.
– Menu Padding, upholstery.
– Menu Border, the border.
– Menu Border Radius, border radius.
– Item Background, menu item background color.
– Item Background (Hover), hover item background color.
– ItemHeight, menu item height.
– Item Padding, padding item.
– Item Font, the font of the text in the menu item.
– Item Font (Hover), hover font.
– Item Divider, element separator.
mobile menu .
– Toggle Bar Designer, here is how the menu looks like on mobile devices.
– Responsive Breakpoint, width to go to the mobile menu.
– Toggle Bar Background, the background color of the mobile menu open button.
– Disable Mobile Toggle, you can turn off the menu switch.
– Toggle Bar Height, the height of the mobile menu switch.
– Mega Menu Columns, how many columns in the drop down menu on the mobile site.
– Menu Background, mobile menu background color.
– Menu Item Height, menu item height.
Custom Styling. Here you can add your own CSS styles for the menu.
– Save your changes.
Menu Locations .
- here you can create menu areas, in which you can then add menus. To create an area for the menu, click on the button - Add another menu location .
Menu area you can add to the site using a shortcode or php code.
On the page: Appearance - Menu - Area management, you will be able to add a menu for the area.
Tools .
– cache, here you can clear the css cache, it is not necessary, the cache is cleared automatically every time you save the menu.
– Plug Data, delete all plugin data stored in the WordPress database. Only if the plugin is removed!
– Export Theme, you can export the mega menu theme in JSON or PHP format.
– Import Theme, you can import the mega menu theme.
– enable, check the box here to enable the mega menu.
– event, here you can choose how the drop-down menu will open.
– effect, You can select an effect for the drop-down menu.
– theme, menu theme, default.
After turning on the mega menu, in each widget of the page, on hover, a button will appear - Mega Menu . Click this button to customize the drop-down menu for that menu item.
Further, you will open a window. At the top right, tap on the wide box to select a widget and add it to the menu. At the top right, you can choose how many columns there will be from the drop-down menu. Widgets can be distributed over the drop-down panel, you can specify which part the widget will occupy, for example 1/2 or 1/3. Click on the right and left arrows to specify which part the widget will occupy.
To open and customize the widget, add some content to it, etc., on the right side of the widget, click on the key icon. Customize the widget and save it.
– Hide Text, hide text from menu item.
– Hide Arrow, hide arrow.
– hide item on mobile, hide menu item on mobile devices.
– hide item on Desktop, hide menu item on computers.
– Menu Item Align, menu item location.
– Sub Menu Align, location of the second level menu.
– Hide sub menu on Mobile, hide the second level menu on mobile devices.
– Save Changes.
All is ready! Save the menu, go to the site and enjoy the result!
Attention! After enabling the mega menu, your default menu style will be completely changed. You will need to customize the menu style in the settings, on the tab “Menu Themes”.
Do you have any questions? Write a comment! Good luck!
Do you want to customize WordPress navigation menus to change their color or appearance? Your WordPress theme handles the appearance of the navigation menu on your site. You can easily customize it with CSS to suit your needs. In this article, we will show you how to customize the style of your WordPress navigation menu.
Method 1: Using Manual Style Change of Navigation Menu in WordPress
This method requires you to edit WordPress theme files. You should only use it if you are comfortable editing the code and understanding how the .
The best way to make customizations in your WordPress theme is . If you are only modifying CSS, then you can see our guide on how to do this without modifying theme files.
The navigation menu in WordPress is displayed as an unordered list (bulleted list).
If you have just used the following tag, then it will display a list without any CSS classes associated with it.
Your unordered list will have a class name of 'menu' with each list item having its own class .
This might work if you only have one menu location. However, most themes have several places where you can display the navigation menu.
Using only the default CSS classes may conflict with menus elsewhere.
That's why you need to define the CSS class and menu position. Chances are your WordPress theme already does this by adding a navigation menu with code like this:
"primary", "menu_class" => "primary-menu",)); ?>
This code tells WordPress that this theme is displaying the start menu. It will also add the primary-menu CSS class to the menu navigation.
You can now style your navigation menu with this CSS structure.
#header .primary-menu() // container class #header .primary-menu ul () // container class first unordered list #header .primary-menu ul ul () //unordered list within an unordered list #header .primary -menu li () // each navigation item #header .primary-menu li a () // each navigation item anchor #header .primary-menu li ul () // unordered list if there is drop down items #header .primary -menu li li () // each drop down navigation item #header .primary-menu li li a () // each drap down navigation item anchor
Replace #header with the container class or ID used by your WordPress theme.
This structure will help you completely change the appearance of the navigation menu.
However, there are other classes that are automatically added by WordPress for each menu item and menu. These classes allow you to further customize the navigation menu.
Current_page_item() // Class for Current Page .current-cat() // Class for Current Category .current-menu-item() // Class for any other current Menu Item .menu-item-type-taxonomy() // Class for a Category .menu-item-type-post_type() // Class for Pages .menu-item-type-custom() // Class for any custom item that you added .menu-item-home() // Class for the Home Link
WordPress also allows you to add CSS classes to individual menu items from within the admin area.
You can use this feature to style menu items, like adding icons to an image using the menu or simply changing the color to make the menu item stand out.
Let's go to the page Appearance » Menus and press the button.
Once you have checked these settings, you will see that an additional field will be added when you edit each individual menu item.
Now you can use this CSS class in your stylesheet to add custom CSS. This will only affect the menu item with the CSS class you added.
Method 2: Customize Menu Style in WordPress Using Plugins
Your WordPress theme uses styling for the navigation menu. Many beginners are not comfortable with editing theme files or writing CSS on their own.
This is where the menu styling WordPress plugin comes in handy. This saves you from editing theme files or writing code.
First you need to install and activate the CSS Hero plugin. For more details see our step by step guide on .
CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (no HTML or CSS).
Upon activation, you will be redirected to receive your CSS Hero key. Just follow the instructions on the screen and you will be redirected back to your site in a few clicks.
Now you need to click on the CSS Hero button in your WordPress admin panel.
CSS Hero offers a WYSIWYG editor (what you see is what you get). Clicking the button will take you to your site with the CSS Hero floating toolbar visible on the screen.
You need to click on the blue icon at the top to start editing.
Point the mouse to your navigation menu and CSS Hero will highlight it, showing the borders around it. When you click on the highlighted navigation menu, it will show you the items you can edit.
In the screenshot above, it shows us the menu item, menu navigation, menu navigation container, etc.
Let's say we want to change the text color of all items in the navigation menu. In this case, we will select a navigation menu that affects all menus.
Now CSS Hero will show you various properties that you can edit like text, background, borders, margins, padding, etc.
You can click on any property you want to change. CSS Hero will show you a simple interface where you can make your changes.
In the screenshot above, we have text selected and it showed us a nice interface for choosing fonts, changing text color, size, and other properties.
As changes are made, you will be able to see them live in the theme preview.
Once you're satisfied with the changes, click on the Save button on the CSS Hero toolbar to save your changes.
The best thing about using this method is that you can easily undo any changes you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.
We hope this article helped you learn how to style your navigation menu in WordPress.
