Dropdown mega menus- a great design find. Site navigation containing a large number of pages has always been a problem. Classic static menus a la sitemap grow rapidly as the number of pages grows and take up a lot of space. Dynamic drop-down menus can significantly save page space, but usability is sacrificed - navigation requires active and fairly precise mouse work. Slightly missed and the wrong menu is revealed.
The impetus for the development of the mega-menu concept was probably the ribbon interface Microsoft office 2007. This concept is right in the middle between a simple static menu and a dynamic dropdown. On the one hand, such a menu is quite informative and intuitive, on the other hand, it significantly reduces the necessary mouse manipulations. Expanding, it can use all the available screen space, which allows the user to look at all the items offered in this context, and, if necessary, hides.
Be that as it may, but the mega-menu is now, as they say, in the trend, and if you still have not used it, then you should take a closer look at it.
UberMenu: WordPress Mega Menu Plugin
This multifunctional plugin can safely be put in first place in this review: it creates full mega menu, has an incredible amount of different options, including background and font color control, font size, and so on. And all this is done from a powerful and convenient settings panel.In addition, the menu also has a number of other great features, such as:
- Built-in responsive grid
- Individual adjustment of the width of each column as well as setting the default width
- Combining menu items into groups
- Centering menu items in horizontal rows
- Custom background images
- Scrollable submenus containing a large number of items.
Cost: $19
Mega Main Menu
Very popular and widely used plugin Mega Main Menu knows how to strike a balance between functionality and simplicity. There are over 10 different tools at your disposal for creating drop-down menus, which can contain text, images, links and widgets. Plus, unlimited color settings and over 600 Google fonts.Cost: $15
Liquida Mega Menu
Liquida Mega Menu- a modern and multifunctional plugin that will suit both ordinary users, and developers - it can be easily embedded in your own developed theme.The plugin offers a wide range of options for menu creation with a modern and stylish design: vertical or horizontal orientation, the ability to include in menu items links, images and even WooCommerce product cards or Easy Digital Downloads, which can come in handy when developing online stores.
Cost: $19
Sky Mega Menu
Three design options for mobile devices, 9 color schemes, custom grid, shapes and 360 vector icons. This set allows Sky Mega Menu to take its rightful place among its own kind.Cost: $6
WP Mega Menu
Plugin from the must have category. Many settings and options, work with categories, subcategories and messages, SEO optimization and two preset color schemes (dark and light), which, however, can be easily changed to your liking.Cost: $29
NOO Menu
In order to understand the settings panel NOO Menu you don't even have to read the documentation - everything is so intuitive. Having at hand preview in real time, you can simply change the values and move the sliders while watching the effect. The color scheme can be changed completely arbitrarily and each option can be saved under its own name, and the number of these options is unlimited.The contents of menu items can be text, links, images, videos, forms and various widgets. It uses its own 12-column grid to accommodate it all.
Cost: $15
Hero Menu – Responsive WordPress Mega Menu Plugin
Hero Menu allows you to bind links to posts, categories, external URLs to menu items, and also display blog posts in them along with a featured image. The latest version announced full support for the WooCommerce platform. For convenient operation has a built-in drag-and-drop editor.The design is modern and stylish and of course completely .
Cost: $19
Superfly - Responsive WordPress Menu Plugin
The so-called fly menu- the latest trend in the world of web design. Such a menu quietly “dozes” in the corner of the page in the form of an icon, taking up almost no space, and when you hover over it, it opens, displacing page elements, and not overlapping them.One of the representatives of this type of mega-menu is Superfly - Responsive WordPress Menu Plugin. An impressive instrument both in terms of design and features.
Cost: $22
Toggle Menu
With the growing popularity of mobile devices, pop-up (or context) menus are becoming important, as they can save a lot of screen space.Toggle menu is very simple, minimalist menu, which, nevertheless, perfectly copes with its main function.
Cost: $5
WP Floating Menu Pro
WP Floating Menu Pro is a 2 in 1 plugin. Menu-navigator for a one-page site and menu stickers. What's more, with this plugin you can, at least visually, transform your traditional site into a modern one-page site. WP Floating Menu Pro will provide smooth scrolling from one part of the page to another.At the disposal of the developer, WP Floating Menu Pro offers 13 and 7 different options for the location on the page, customization options, colors, content and number of items.
For screens smaller than 480px, it is possible to automatic shutdown menu.
Cost: $17
Flexi Menu WordPress Plugin
Flexi Menu is 5 different, fully customizable menu types: fly menu, wide (page width), wide+descriptions, wide+images, and vertical.Cost: $14
Max Mega Menu (Free)
Very good plugin with drag-and-drop menu editor and the ability to embed almost any widget in menu items - from contact forms to Google maps.Capable of automatically converting already existing regular menus into one mega menu with full control over the conversion process and saving or reassigning appropriate actions.
More recently, such a feature as the Mega Menu was the lot of premium plugins and themes only. But today, I will present to you, dear readers, two completely free plugins that will allow you to quickly, easily and of course, completely free of charge, build a powerful navigation menu on your site, not so much inferior to paid counterparts.
What is a Mega Menu anyway? Yes, the same thing, the usual navigation menu with which you have probably come across and configured more than once. Just unlike the standard functionality, there are also additional features for customizing and displaying individual elements. For example, adding not only a vertical, but also a horizontal submenu, adding icons and individual images to the menu, fine-tuning the appearance for all menu items, and so on. All this is in our plug-ins considered today.
Another great opportunity to add an awesome navigation menu to your site with a plugin is Mega Menu by WooRockets.com. Installing and activating the plugin is standard.
This plugin is somewhat more difficult to master, but it also offers more opportunities than the competitor described above. Here the construction of the menu is very similar to the construction of pages in the standard Visual Composer.
Go to the section WR mega menu in your admin panel and click on Add New. We fall on new page to build a new menu. Those who have already dealt with drag & drop composers will immediately feel at home. The process of building a menu is not much different from building a page.
At the beginning, make sure that at the top in the menu − location The menu is exactly what you need. Or click on Management Location to select a menu.
Click - Add Element and select in the pop-up window the type of content that you want to add to the menu. At the top left, you can choose one of the standard options or add WordPress widgets.
If necessary, add rows with division into the required number of columns. On the left are tabs for dragging menu items up or down, and on the right are tabs where you can enable editing or deleting. Do not forget to press the usual button on the right - Publish or - Refresh to preserve the results of their labors.
In general, any texts, pictures, and, if desired, any widgets can easily be placed in your new menu. The appearance of the menu can be changed by clicking on the button. Styling or next to insert your tables by clicking the button Custom CSS.
A very functional thing, in short. It is not for nothing that the authors, in addition to this plugin, also have: a contact form and, of course, a composer, which apparently served as the basis for the mega menu plugin. You can see a working demo in all its glory here.
Gorgeous and powerful plugins with which you can practically create the menu of your dreams. The only thing that can slightly overshadow the joy of users is the issue of compatibility with different themes. Unfortunately, as far as I remember, premium plugins sometimes had this issue. I tested both plugins on the default theme and didn't notice any problems or bugs. What do you want, friends!
Hello! In my life, as always, there are many events, so it is very difficult to find time for a blog. Yesterday we bought tickets to Sri Lanka and we will fly away for 4 months soon, come visit us! And now I'm looking for the most beautiful wedding dress :))
Today we will talk about how to create a menu in WordPress, as well as add these blocks in arbitrary areas of the template.
We will learn how to customize the menu and edit it as we see fit.
Editing and Customizing Menus in WordPress
First, let's analyze the functionality available to us in the blog admin panel. In new templates compatible with latest versions WordPress, the menu display is quite simple and the setup is not too difficult.
After we have created a child theme that can be modified without affecting the main theme, let's add the following function to its function.php file.
| 1 2 3 | register_nav_menus( array ( "additional menu" => __( "Additional Menu" , "Your Topic Name" ) ) ) ; |
register_nav_menus(array("additionalmenu" => __("Additional Menu", "Your Theme Name")));
If you are not creating a child theme, then add it to your theme's main functions file.
This feature will allow us to add an additional WordPress menu to our template and create another area for it.
After adding, go to the admin panel in the "Manage areas":
An additional topic area should appear with the title we gave in the function.
Click "Use new menu" if you want to change the sections for the additional area, or select "Home". Then the same sections will be displayed in the new area as in the Primary Menu.
In our case, we create a new menu called Additional:
Select the "Additional Menu" theme area for it.
But now we need to link this area to template blocks. For example, we need to make an additional menu under the header of a WordPress site. Go to the header.php file or copy it to the child theme. Add the following after the body tag:
| 1 2 3 | <div id = "additional menu" > ( array( "theme_location" =>"additional menu")); ?></div> |
Let's see the result:
We have an additional menu above the header. Now we need to set styles for it, align the items to a line and lower the block under the header.
We make the following changes to the style.css file:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #additionalmenu nav ( width : 940px ; /* container width */ margin : 0 auto ; ) #additionalmenu li ( display : inline ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu ( width : 100% ; top : 420px ; /* Indent from the top edge */ background-color : #000 ; /* background color */ position : relative ; ) |
#additionalmenu nav ( width: 940px; /*container width */ margin: 0 auto; ) #additionalmenu li ( display: inline; padding: 10px; /* padding */ margin: 20px 0; ) #additionalmenu ( width: 100% ; top: 420px; /* top margin */ background-color: #000; /* background color */ position: relative; )
Let's see what happened:
The display of the menu we created is still far from ideal, but with due care, you can bring it to the appropriate look for your blog.
Widgets and Plugins for Adding Menus to WordPress
I suggest watching a video on creating a menu in WordPress:
In the article about the widget "Custom Menu" was mentioned. Let's analyze it in more detail.
Go to "Appearance" - "Widgets", find the "Custom Menu" widget and drag it to the area available for your theme and suitable for the blog:
In our case, the menu block is added to the sidebar. For it, we have selected sections of the Additional block we created.
Accordingly, the following block will be displayed in the sidebar on the right:
In addition to the standard widget built into the theme, there are also many additional plugins designed to create various kinds menus: vertical, horizontal, dropdown, etc.
For example, here is a plugin for creating a vertical multilevel menu in WordPress: Navgoco Vertical Multilevel Slide Menu.
Or the more customizable Dropdown Menu Widget.
Widgets with JQwery effects for menus are also popular, for example: JQuery Slick Menu Widget.
Let's take an example of how it works.
After installing the jQuery Slick Menu Widget, go to "Appearance" - "Widgets".
Among the list of available widgets, a new one, installed by us, should appear. Move it to an accessible area, in our case the sidebar:
Let's open its settings:
We select the name of the menu (sections that we created), Tab Text - the name of the block that will be displayed on the site, the location (we will select Left - on the left), Offset - the indent from the top edge in pixels, Animation Speed - animation speed (Fast). You can select Auto-Close Menu to make the block disappear automatically. And choose the color of the block. Click save and see the result:
A pull-out menu appeared on the left side of the header. When you click on the tongue, the sections appear:
When you click again, the block will disappear again.
This is just one of the ways to install, edit and display menus in WordPress.
Choose the most appropriate and convenient way to create a menu for your WordPress blog. Good luck!
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 I already have the Max mega menu 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), 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.
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 set it up with using CSS to match your requirements. In this article, we will show you how to customize the style of your WordPress navigation menu.
Method 1: Using Manual Change Style of WordPress Navigation Menu
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 make custom settings 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 with using 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.
That's when it comes in handy WordPress Plugin menu styling. This saves you from editing theme files or writing code.
First you need to install and activate the CSS Hero plugin. For more detailed information see our step by step guide on how to.
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, which can be edited 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.