Enfold
Enfold v4 Update: Hide the Enfold Mobile Menu button/burger icon
Go to Appearance > Editor and select “functions.php” on the right. Add this to the bottom of the file:
|
1 2 3 |
function avia_append_burger_menu() { return ""; } |
Note: this code should be placed in your child themes functions.php file (or you will need to redo the edit every time the main Enfold theme is updated).
Restore default admin menu behaviour
Enfold includes it’s own Mega Menu functionality which stops the blue “Mega Menu” button from being able to be clicked on the Appearance > Menus page.
To fix this, go to Appearance > Editor and select “functions.php” on the right. Add this to the bottom of the file:
|
1 2 3 4 |
function restore_default_edit_walker() { return 'Walker_Nav_Menu_Edit'; } add_filter( 'wp_edit_nav_menu_walker', 'restore_default_edit_walker' , 101); |
Position the desktop menu
When you enable Max Mega Menu the menu will be positioned right at the top of the page.
Under Mega Menu > Menu Themes, use the Menu Padding and Menu Height options to reposition the menu (add Top padding to move the menu down).
Fix mobile menu
The CSS required to correct the position of the mobile menu will depend if you are using the default header style or the alternative header style.
Default Header Style
By default the mobile menu will be positioned in the top right corner of the page. To push the mobile menu down onto a new line, go to Enfold > General Styling > Quick CSS and enter the following:
|
1 2 3 4 5 6 |
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .main_menu { position: relative; width: 100%; } } |
Alternative Header Style
If you are using the Alternative header style, go to Enfold > General Styling > Quick CSS and enter the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@media only screen and (max-width: 989px) { .responsive #top #wrap_all .main_menu, .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu { display: none !important; } .responsive #header_main_alternate, .responsive #top #wrap_all #header_main_alternate .main_menu, .responsive #top .av_mobile_menu_tablet #header_main_alternate { display: block !important; position: relative; } .responsive .av-burger-menu-main, .responsive.html_mobile_menu_tablet .av-burger-menu-main { display: none !important; } } |
Full width sub menus
To make the mega sub menus span the entire width of the page, go to Mega Menu > Menu Themes and set the Panel Width (Outer) to:
.container
Remove search icon
Under Enfold > Main Menu, uncheck “Append search icon to main menu”. You can replace this using the Max Mega Menu search option.
Displaying a custom mega menu using the Enfold Layout Editor
To display a Mega Menu using the Enfold layout editor, first add a “Grid Row” block to the layout. Then place a “Code” block inside the “Grid Row” block. Edit the Code block and paste in a menu shortcode (found under Mega Menu > Menu Locations).