Create mega menu
All the menus applied in the site are created in Dashboard -> Appearance -> Menu. WordPress manual: https://codex.wordpress.org/WordPress_Menu_User_Guide provides detailed instructions on creating/editing/saving menus. Basel theme provides two menu locations: Main menu and Mobile menu. One and the same menu may be both: Main and Mobile. In addition.
Basel Theme provides the options extending the default WordPress menu functions making menu more flexible and powerful by means of megamenu blocks. Megamenu blocks are WP Bakery page builder templates, containing Extra menu elements to make sub-menu better arranged and looking nicer. Besides Extra menu elements, megamenu blocks can contain images, text and other elements from WP Bakey page builder chart.
In order to create a megamenu it is necessary to create HTML block separately for each menu item. Dashboard -> HTML blocks – > Add new.
As soon as Mega menu blocks are ready, they may be added to menu items in Appearance -> Menu -> Select menu -> enter menu item -> The HTML block shorcode is inserted in the Description field.
Custom fields [for theme] in menu item:
Design
- This option would determine the width of the mega menu block: Default, Full-width, and Set Size.
- Default – the drop-down menu will have the default width .
- Full-width – block will have the full width of the menu container aligned in the center.
- Set-size– allows setting the custom size of the block.
Icon name This filed supports icons only from the provided source from FontAwesome source – the field requires to insert the key word from FontAwesome icon. For example, ID cart icon code looks like
<i class="fa fa-id-card-o" aria-hidden="true"></i>it is necessary to extract the part, that identifies the icon, which is id-card-o and insert into the field.
Open on mouse event – allows to set hover or click event on the menu item, in result Mega menu block would appear on hover or click.
Label – option to add a custom tooltip to menu item.
Dropdown text color scheme – the option to set the color of the tooltip in the menu item.
Dropdown text color scheme – dark or white. Dark color scheme ensures dart text and light background. Light color scheme ensure light text and dark background of the mega menu block.
One page anchor -Enable using one-page navigation menu. If enabled it is necessary to set the link for this item to be like this: http://your_site.com/home_page/#anchor_id where anchor_id will be the ID of the ROW on your home page.
“Call to action” button – allows presenting the menu item as a button.
Upload image – Option to upload an image to set on the background.
Open link in new tab option is provided.
Link Relationship XFN – https://codex.wordpress.org/Defining_Relationships_with_XFN
Description – option to insert HTML block shortcode to get the mega menu block.
CSS Classes (optional) allow to insert a class and assign custom CSS
Last updated: February 23, 2022