Menu

Overview

The website menu is used to link different sections of your site so users can easily navigate from one section to another and find the information easily. Let’s see how we can create different menus and customize the look and feel of it.

Menu Setup

Multiple menus can be created from the WordPress dashboard and each menu can be assigned to a different section of the website like the header menu, sidebar menu, footer menu and so on. Let’s take a look at creating a menu and assign it as the main menu of the theme.

Create a new menu: Go to WordPress Dashboard > Appearance > Menu and click on create a new menu.

Give your menu a custom name such as “header menu” or “footer menu” so we can later assign it to different sections of the site and click on “Create Menu“.

Add Menu items: You can add any page and post types to the menu or select custom link to add an external link that is not on the list. To create submenu drag the menu item below the parent and indent it as shown in the below example for the Blog.

To change the order of the menu items in which they appear just drag the menu item up or down in the Menu Structure.

Assign and Save menu: Once the menu items are added to the Menu Structure assign the menu to the different sections of the website like the header, footer etc. and finally, don’t forget to “Save Menu“.

If all the steps are successfully performed the menu should appear in the location assigned under the “Menu Settings“.

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Menu Styles and Settings

Enfold comes with a variety of menu styles, menu locations such as the Main menu, Secondary menu, Footer menu, etc. Most of the menu settings are located in Enfold > Main menu Check out the settings map to change the menu options below:

Top Bar Menu

The Top bar menu can be activated from Enfold > Header > Extra Elements > Header Secondary Menu

A menu can be assigned to the Top Bar area from WordPress Dashboard > Appearance > Menu

To change the background color of the top bar go to Enfold > Advanced Styling > Small bar above Main Menu > Background Color

CSS Code to change the background color:

/* Top Bar background */
#top #header_meta {
background: gold;
}

To hide the Topbar in mobile use the below CSS


/* Hide Topbar in mobile */
@media only screen and (max-width: 767px) {
    #header_meta {
        display:none;
    }
}

Add the below CSS to your site to display the Topbar only in the mobile device.


/* Display Topbar only in mobile */

#header_meta {
        display:none;
    }

@media only screen and (max-width: 767px) {
    #header_meta {
        display:block;
    }
}

Top bar links

To change the link color of the top bar menu items go to Enfold > Advanced Styling > Small bar above Main Menu > Font Color

To make changes using CSS please use the below code:




/* Top Bar Links */
#top #header_meta li a {	
	color: blue;
}

To change the link font of the top bar menu items go to Enfold > Advanced Styling > Small bar above Main Menu > Font Family

To make changes using CSS please use the below code:




/* Top Bar Link font */
#top #header_meta li a {	
	font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

To change the separator color of the top bar menu items go to Enfold > Advanced Styling > Small bar above Main Menu > Border Color

To remove the separators copy and paste the word “transparent” in the color value field.

To make changes using CSS please use the below code:




/* Top Bar Link separator */
#top #header_meta li {	
	border:none;
}

To highlight the top bar active menu please use the below CSS


/* Highlight topbar current menu */

#top #header_meta li.current-menu-item a {
	 color: gold;
}

To make changes to the links on mouse hover using CSS please use the below code:



/* Top Bar Link style on hover */
#top #header_meta li.menu-item:hover a {
	color: gold;
	text-decoration: none;
}

Top bar sub links

By default, the sublevel links inherit the font family used by the main menu items. To assign a different font family to the sublevel links please use the below code:



/* Top bar sub link style */
#top #wrap_all #header #header_meta .sub_menu ul ul li a {		
    color: #444;
}

To change the Top bar menu sub link background color, please use the below code:



/* Top bar menu sub link background */

#top #wrap_all #header #header_meta .sub_menu ul ul li a {		
    background: red;
}

The top bar menu sub links background color can be changed on hover using the below CSS:

You can add more CSS rules like the font color on hover if required.



/* Hover state */
#top #wrap_all #header #header_meta .sub_menu ul ul li:hover a {		
    background: gold;
}

To remove the default horizontal separators and the border around the sub menu, please use the below CSS.

You can add your own borders styles to the same selector if required.


/* Remove default border */
#top #wrap_all #header #header_meta .sub_menu ul ul,
#top #wrap_all #header #header_meta .sub_menu ul ul li a {
    border: none;
}

Top Bar info (Phone/E-mail)

Custom information such as phone number, email address and icons can be added to the top bar from Enfold Options > Header > Extra Elements > Phone Number or small info text

By default, the info text inherits the style options set for the top bar menu.

To make changes only to the info text using CSS please use the below code:




/* Top Bar phone info */
#top #header_meta .phone-info {
	color: gold;
}

The links in the top bar info inherit the styles set for the top bar menu, to make changes to a clickable link like a phone number or email address use the below CSS code:


/* Top Bar phone info link */
#top #header_meta .phone-info a{
	color: gold;
	font-size: 30px;
}

By default the menu links and the phone info links get an underline. To remove the underline and set your own hover style please use the below code:




/* Top Bar links hover state*/
#top #header_meta li.menu-item:hover a,
#top #header_meta .phone-info a:hover{
    color: green;
    text-decoration: none;
}

To add an icon next to your contact info such as a phone or email icon

  1. Enable debug mode
  2. Drop an icon element on to an empty page with desired settings.
  3. Copy the icon shortcode from the debug window to Enfold Options > Header > Extra Elements > Phone Number or small info text and place it next to the phone number or email address as shown in the below screenshot.

    NOTE: To add a custom icon please check the documentation.

Top Bar info on Transparent header

By default, the info text inherits the style options set for the top bar menu.

To make changes only to the info text using CSS please use the below code:





/* Top Bar phone info text on transparent header*/
#top #header.av_header_transparency #header_meta .phone-info {
	color: gold;
}

Use the below CSS to make changes to the Top Bar info text on page scroll:



/* Top Bar phone info text when page is scrolled */
#top #header:not(.av_header_transparency) #header_meta .phone-info {
	color: red !important;
}

The links in the top bar info inherit the styles set for the top bar menu, to make changes to a clickable link like a phone number or email address use the below CSS code:



/* Top Bar phone info link on transparent header */
#top #header.av_header_transparency #header_meta .phone-info a {
	color: gold !important;
}

Use the below CSS to change the style for clickable top bar info links like a phone number or email address:



/* Top Bar phone info link when page is scrolled */
#top #header:not(.av_header_transparency) #header_meta .phone-info a{
	color: red !important;
}

Top Bar extra elements

To display a search icon in the top bar after the secondary menu, you have to

  1. First, activate the top bar menu from Enfold > Header > Extra Elements > Header Secondary Menu
  2. Add the below code to your child theme functions.php
    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
function avia_append_search_nav_mod()
{
          global $avia_config;
          ob_start();
          get_search_form();
          $form =  htmlspecialchars(ob_get_clean()) ;

          $items .= '
<div id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special topbar-search-icon">
                        <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                          <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                        </a></div>
';

    echo $items;
}
  3. Add the below code to your child theme style.css 
    
/* Top Bar search bar */

#top #header_meta .container {
	display: flex;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	margin-left: auto;
	order: 2;
}

#top #header_meta .phone-info span {
	display: flex;
	align-items: center;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

Add a search bar to the top bar:

  1. Enable the search bar shortcode.
  2. Copy the below shortcode to Enfold > Header > Extra Elements > Phone Number or small info text 
    
[avia_search]
  3. To align the search bar inline with the other elements, copy the below CSS to your website: 
    
/* Top Bar search bar */

#top #header_meta .container {
	display: flex;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	margin-left: auto;
	order: 2;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

Add a clickable phone or email icon:

    1. Enable debug mode.
    2. Open a new page and drop the icon element of your choice.
    3. Change the icon size to ’20px’.
    4. Change the link optiion to “Set manually”
    5. For a clickable phone link paste the below code in the link value and edit your phone number: 
      
tel:123456789
    6. For a clickable email link set up a new icon and paste the below code in the link value and edit your email address: 
      
mailto:youremila@domain.com
    7. Finally copy the icon shortcode to from the debug window to Enfold Options > Header > Extra Elements > Phone Number or small info text

To add a clickable phone or email text to the top bar copy the below code and paste it in the Enfold Options > Header > Extra Elements > Phone Number or small info text

  1. Set the links for clickable phone link:
    <a href="tel:123456789">Call Today!</a>
  2. Set the links for clickable email link:
    <a href="mailto:john@example.com">Email us</a>

You can add social icons to the top bar from:
Enfold Options > Header > Extra Elements > Header Social Icons > Display in top bar

If you are using multiple elements like the links, icons and search feature in the top bar please use the below CSS to line them up next to each other or else the elements may stack up.

 
/* Top Bar search bar */

#top #header_meta .container {
	display: flex;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	margin-left: auto;
	order: 2;
}

#top #header_meta .phone-info span {
	display: flex;
	align-items: center;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

Top Bar elements position

To align the top bar elements to the left, please use the below CSS:



/* Top Bar content alignment */

#top #header_meta .container {
	display: flex;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	order: 2;
}

#top #header_meta .phone-info span {
	display: flex;
	align-items: center;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

To align the top bar content to the center, please use the below CSS



/* Top Bar content alignment */

#top #header_meta .container {
	display: flex;
	justify-content: center;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	order: 2;
}

#top #header_meta .phone-info span {
	display: flex;
	align-items: center;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

To align the topbar content to the right, please use the below CSS



/* Top Bar content alignment */

#top #header_meta .container {
	display: flex;
	justify-content: flex-end;
}

#top #header_meta .sub_menu {
	top:0;
}
#top #header_meta .sub_menu,
#top #header_meta .social_bookmarks {
	align-self: center;
}

#top #header_meta .phone-info {
	order: 2;
}

#top #header_meta .phone-info span {
	display: flex;
	align-items: center;
}

#top #header_meta .sub_menu {
	order: 1;
}
#top #header_meta .social_bookmarks {
	order: 3;
}

Main Menu

For most of the demos, the horizontal menu is already activated by default. The main menu settings can be accessed from Enfold > Main menu > General > Menu Items for Desktop

Main menu links

Main menu can be assigned from WordPress Dashboard > Appearance > Menu for step by step info please check the Menu Set up section.

A few options to change the main menu link color:

  1. Enfold options > General styling > Logo area > Logo Area secondary font color
  2. Enfold options > Advanced styling > Main menu links > Font Color
  3. To make changes using CSS please use the below code:

    

/* Main menu links */

#top #header #avia-menu .menu-item > a > .avia-menu-text {
color:#24f;
}

To change the font family of the main menu items go to Enfold > Advanced Styling > Main Menu Links > Font Family

To make changes using CSS please use the below code:



/* Main menu links */

#top #header #avia-menu .menu-item > a > .avia-menu-text {
font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

To change the background color of the main menu items go to Enfold > Advanced Styling > Main Menu Links > Background Color

To make changes using CSS please use the below code:



/* Main menu links */

#top #header #avia-menu li.menu-item > a  {
    background-color: gold;
}

By default, the icons in the menu links will inherit the same styles applied to the menu links.

To make changes using CSS please use the below code:



/* Main menu links */

#top #header #avia-menu li.menu-item > a > .avia-menu-text .av_font_icon  {
    color: gold;
}

Remove Separator: To remove the separators go to Enfold > Main Menu > General > Separator

Size: Separator size for the menu items can be updated from Enfold > Main Menu > General > Separator

Color: Separator color can be changed from Enfold > Advanced Styling >Main Menu > Border Color

To add custom menu separator to the enfold menu please disable the default separator from Enfold > Main Menu > General > Separator between menu items and add the below custom CSS to your site.


/*------------------------*/
/*   Custom separator
/*------------------------*/
ul#avia-menu > li > a:after {
    content: '/';
    display: inline-block;
    position: relative;
    left: 13px;
}

ul#avia-menu > li:last-child > a:after {
    display: none;
}

Add a border style to the main menu items from WordPress > Appearance > Menu > Main menu > Menu Item > Click the drop-down arrow to expand the options and select the “Menu Style” to be “Button Style (Bordered)”.

Now your menu item should look similar to the “Contact” menu in the below screenshot

The button style applied to the main menu item can be further customized from Enfold > Advanced styling > Main Menu > Menu Item Button with Border.

Example: To add a border radius to the button so it looks like a pill. Change the value of the border-radius field.

If you like to add your own custom styles using CSS please use the below code:



/* Main menu item with bordered button */

#top .menu-item.av-menu-button-bordered a .avia-menu-text{
  border: 2px solid red !important;
  border-radius: 20px;
}

To change the menu item style to look like a button so you can grab more attention to a particular menu item go to Dashboard > Appearance > Menu

Click on the drop-down arrow to expand the menu options and look for the menu style.

A few options to change the main menu link hover color:

  1. Enfold options > General styling > Logo area > Logo Area font color
  2. Enfold options > Advanced styling > Main menu links > Font Color (Select Apply only to mouse hover state)
  3. To make changes using CSS please use the below code:Main menu text color: 
    

/* Main menu links */

#top #header #avia-menu li.menu-item:hover > a > .avia-menu-text {
	color:red;
}

    Underline color on hover:

    

/* Underline color on hover */
#top #avia-menu .menu-item:hover > a > .avia-menu-fx {
    background-color: gold;
    border: none !important;
}

A few options to change the main menu link Active or Current page menu color:

  1. Enfold options > General styling > Logo area > Logo Area font color
  2. Enfold options > Advanced styling > Main menu links > Font Color (Select Apply only to active state)
  3. To make changes using CSS please use the below code:

    Active menu link color :

    

/* Main menu text color  */

#top #header #avia-menu li.current-menu-item > a > .avia-menu-text {
	color:red;
}

    Active menu underline color:

    /* Active menu underline color */
#top #avia-menu li.current-menu-item > a > .avia-menu-fx {
    background-color: blue;
    border: none !important;
}

To remove the underline from the active menu item and also on hover please use the custom CSS below.


/*------------------------*/
/*  Remove underline
/*------------------------*/


#top #avia-menu li.current-menu-item > a > .avia-menu-fx,
#top #avia-menu .menu-item:hover > a > .avia-menu-fx {
    background-color: transparent !important;
    border: none !important;
    opacity: 0;
    visibility: hidden;
}


Once the text menu is set up its position in the header can be changed from Enfold > Header > Header Layout > Menu and Logo Position below are the options available to position the menu inside the header for desktop layout.

  • Logo left, Menu right
  • Logo right, Menu Left
  • Logo left, Menu below
  • Logo right, Menu below
  • Logo center, Menu below
  • Logo center, Menu above
  • Adapt position to width: To place the logo and the menu on the left and right side of the header so they adapt to the browser width go to Enfold > Header > Header Behavior > Let logo and menu position adapt to browser window

To hide the main menu on the desktop, please use the below CSS.


/* Hide main menu */
#top .main_menu {
   display:none;
}

To disable the parent menu link so it cannot be clicked and show only the submenu items on hover please follow the below steps.

  • Please go to Appearance > Menus > Select a menu to edit > Your menu
  • Expand the “Custom Links” options.
  • Create a parent menu item with its URL as “#” so it will not be clickable.
  • Add the submenu items to the parent menu.
  • Save your menu.

Main menu sub-text

Learn how to add a subtext to your menu items and change the font color, size and other style values using custom CSS.

Enable the “Description” field for the menu items from WordPress Dashboard > Appearance > Menus > Screen Options (on the top right of the page).

Add the description or subtext for the menu items and click on the Save Menu button.

For the vertical menu, the description should show fine by default.
For the horizontal menu add the below CSS and adjust the style values to suit your design.



/* Main menu subtext */

#top #header #avia-menu li.menu-item a > .avia-menu-subtext{
	display: flex;
	margin-top: -60px;
	color: gold;
	font-size: 12px;
	font-weight: lighter;
	letter-spacing: 0.15em;
}

Main menu sub-links

A few options to change the sub menu link color:

  1. Enfold options > Advanced styling > Main menu sublevel  links > Font Color
  2. To make changes using CSS please use the below code: 
    

/* Main menu sublevel */

#top #header #avia-menu .sub-menu li.menu-item a .avia-menu-text {	
	color: red;
}

By default, the sublevel links inherit the font family used by the main menu items. To assign a different font family to the sublevel links please use the below code:



/* Main menu sublevel */
#top #header #avia-menu .sub-menu li.menu-item,
#top #header #avia-menu .sub-menu li.menu-item a span.avia-menu-text {		
	font-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed and in use by any other element or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

To change the background color of the sublevel menu items go to Enfold > Advanced Styling > Main menu sublevel links > Background Color

To make changes using CSS please use the below code:



/* Main menu sublevel */

#top #wrap_all #header .av-main-nav ul > li > a {		
    background: red;
}

To custom style the main menu dropdown background and add some transparency please use the below CSS

 
/* Submenu transparent dropdown */
#top #wrap_all #header.av_header_transparency .av-main-nav ul > li > a {		
    background: transparent;
    border: none;
}

#top #wrap_all #header.av_header_transparency .av-main-nav ul {
	background: rgba(0,0,0,.5);	
}

Remove Border: The submenu dropdown border can be removed by adding the word “transparent” as the border color value in Enfold > Advanced Styling > Main Menu sublevel Links > Border Color

Border Color: Border color can be changed from Enfold > Advanced Styling > Main Menu sublevel Links > Border Color

To add custom border style please use the below code in your site and adjust the values as required.


/* Main menu sublevel */
#top #wrap_all #header .av-main-nav ul {		
    border: 4px solid red;
}

#top #wrap_all #header .av-main-nav ul > li > a {		
    /*background: red;*/
    border-width: 0;
    border-style: none;
}

A few options to change the link hover color:

  1. Enfold options > General styling > Logo area > Logo Area font color
  2. Enfold options > Advanced styling > Main menu sublevel Links Make changes and Select Apply only to mouse hover state
  3. To make changes using CSS please use the below code: 
    

/* Main menu sublevel */

#top #wrap_all #header #avia-menu ul li:hover a {		
    color: #FFF;
    background: red;    
}

Changes the active submenu links using the below code:



/* Main menu sublevel */

#top #wrap_all #header #avia-menu ul li.current-menu-item a {		
    color: #FFF;
    background: red;    
}

To style the parent menu if a submenu page is active please use the below code:



/* Main menu sublevel */
#top #wrap_all #header #avia-menu li.active-parent-item > a {		
    color: #FFF;
    background: red;    
}

To add a horizontal separator to the sublevel menu items please use the below CSS.


/* Main menu sublevel */
#top #wrap_all #header #avia-menu ul li.menu-item > a {		
     border-bottom: 1px solid black;  
}

Display submenu on hover.

1. Go to Appearance > Menus

2. Select custom links from the menu options.

3. Add a new parent menu item in the “link text” and use ” # ” for the URL field and click on Add to menu.

4. Drag and drop the submenu items to indent under the parent menu item 🙂

Main menu on transparent header

A few options to change the main menu link color on transparent header:

  1. Enfold options > Header > Transparency Options > Transparency menu color
  2. To make changes using CSS please use the below code: 
    

/* Main menu on transparent header */	

#top #header.av_header_transparency #avia-menu > .menu-item > a > .avia-menu-text {
	color:gold;
}

The menu items on the transparent header inherit the font styles of the default menu.

To make changes to the transparent header menu please use the below code:



/* Main menu on transparent header */	
#top #header.av_header_transparency #avia-menu > .menu-item > a > .avia-menu-text {
    font-family:'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

By default, the background color of the menu is transparent. To make changes using CSS please use the below code:



/* Main menu on transparent header */	

#top #wrap_all #header.av_header_transparency .main_menu {
	background:gold;
}

To change the main menu link hover color on a transparent header please use the below code:



/* Main menu on transparent header */	

#header.av_header_transparency ul#avia-menu > li.menu-item:hover > a > .avia-menu-text {
	color: red;
}

The below code will change the color of the main menu links for the active page:



/* Main menu links */

#top #header.av_header_transparency #avia-menu li.current-menu-item > a > .avia-menu-text {
	color:red;
}

Main menu sub-links on transparent header

The sub menu link color can be changed frm Enfold options > Advanced styling > Main menu sublevel  links > Font Color but this will change the color on both the default header and transparent header. To make changes only on the transparent header please use the below code:



/* Main menu sublevel */

#top #header.av_header_transparency #avia-menu .sub-menu li.menu-item a .avia-menu-text {	
	color: red;
}

Use the below CSS to change the sublevel menu background only on the transparent header:



/* Main menu sublevel */

#top #wrap_all #header.av_header_transparency .av-main-nav ul > li > a {		
    background: red;
}

Remove Border: The submenu border can be removed by adding the word “transparent” as the border color value in Enfold > Advanced Styling > Main Menu sublevel Links > Border Color

Border Color: Border color can be changed from Enfold > Advanced Styling > Main Menu sublevel Links > Border Color

To add custom border style only on the transparent header please use the below code and adjust the values as required.


/* Main menu sublevel */
#top #wrap_all #header.av_header_transparency .av-main-nav ul {		
    border: 4px solid red;
}

#top #wrap_all #header.av_header_transparency .av-main-nav ul > li > a {		
    border-width: 0;
    border-style: none;
}

To make changes to the hover state on transparent header please use the below CSS code:



/* Main menu sublevel */

#top #wrap_all #header.av_header_transparency #avia-menu ul li:hover a {		
    color: #FFF;
    background: red;    
}

To custom style the active submenu links on a transparent header use the below CSS code:



/* Main menu sublevel on transparent */

#top #wrap_all #header.av_header_transparency #avia-menu ul li.current-menu-item a {		
    color: #FFF;
    background: red;    
}

To style the parent menu if a submenu page is active please use the below code:



/* Main menu sublevel on transparent */
#top #wrap_all #header.av_header_transparency #avia-menu li.active-parent-item > a {		
    color: #FFF;
    background: red;    
}

To add a horizontal separator to the sublevel menu items on a transparent header please use the below CSS.


/* Main menu sublevel */
#top #wrap_all #header.av_header_transparency #avia-menu ul li.menu-item > a {		
     border-bottom: 1px solid black;  
}

Main menu on shrinking header

Shrinking header on page scroll can be activated from Enfold > Header > Header Behavior > Sticky Header > Shrinking Header

The shrinking header menu inherits the styles form the default header. To make changes using CSS please use the below code:



/* Main menu on shrinking header */	

#top #header.header-scrolled-full #avia-menu > .menu-item > a > .avia-menu-text {
	color:gold;
}

By default, the background color of the menu is transparent. To make changes using CSS please use the below code:



/* Main menu on shrinking header */	

#top #wrap_all #header.header-scrolled-full .main_menu {
	background:gold;
}

To change the main menu link hover color on a transparent header please use the below code:



/* Main menu on shrinking header */	

#header.header-scrolled-full ul#avia-menu > li.menu-item:hover > a > .avia-menu-text {
	color: red;
}

The below code will change the color of the main menu links for the active page:



/* Main menu links */

#top #header.header-scrolled-full #avia-menu li.current-menu-item > a > .avia-menu-text {
	color:red;
}

Vertical menu

To change the menu appearance to vertical menu go to Enfold > General Layout > Layout > Logo and Main Menu

Vertical menu links

A few options to change the main menu link color:

  1. Enfold options > General styling > Logo area > Logo Area Heading color
  2. Enfold options > Advanced styling > Main menu links > Font Color
  3. To make changes using CSS please use the below code: 
    

/* Vertical header menu links */

#top #header.av_header_sidebar #avia-menu .menu-item > a > .avia-menu-text {
    color:#24f;
}

To change the font family of the main menu items go to Enfold > Advanced Styling > Main Menu Links > Font Family

To make changes using CSS please use the below code:



/* Main menu links */

#top #header.av_header_sidebar #avia-menu .menu-item > a > .avia-menu-text {
font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

To change the background color of the main menu items go to Enfold > Advanced Styling > Main Menu Links > Background Color

To make changes using CSS please use the below code:



/* Main menu links */

#top #header #avia-menu li.menu-item > a  {
    background-color: gold;
}

Separator color of the vertical menu items can be changed from Enfold > Advanced Styling > Main Menu > Border Color

To remove the separators copy and paste the word “transparent” in the color value field.

To remove the separator using CSS please use the below code:




/* Vertical menu separator */
#top #header ul#avia-menu > li > a {
    border: none;
}

To make changes using CSS please use the below code:




/* Vertical menu separator */
#top #header ul#avia-menu > li > a {
    border-bottom: 5px solid red;
}

A few options to change the main menu link hover color:

  1. Enfold options > General styling > Logo area > Logo Area font color
  2. Enfold options > Advanced styling > Main menu links > Font Color (Select Apply only to mouse hover state)
  3. To make changes using CSS please use the below code: 
    

/* Main menu links */

#top #header #avia-menu li.menu-item:hover > a > .avia-menu-text {
	color:red;
}

A few options to change the main menu link Active or Current page menu color:

  1. Enfold options > Advanced styling > Main menu links > Font Color (Select Apply only to active state)
  2. To make changes using CSS please use the below code: 
    

/* Main menu links */

#top #header #avia-menu li.current-menu-item > a > .avia-menu-text {
	color:red;
}

The header content of the vertical menu can be aligned from Enfold > General Layout > Layout > Content Alignment

  • Center align
  • Left align
  • Right align

Vertical menu sub-text

The vertical menu subtext is set up the same way as we did for the main menu subtext in the Main menu section.

A few options to change the main menu link color:

  1. Enfold options > General styling > Logo area > Logo Area secondary font color
  2. Enfold options > Advanced styling > Main menu links > Font Color
  3. To make changes using CSS please use the below code: 
    

/* Main menu subtext */

#top #header #avia-menu li.menu-item a > .avia-menu-subtext{
	color: #cdcfd0;
}}

To make changes to the font style of the subtext please use the below CSS code:



/* Main menu subtext */

#top #header #avia-menu li.menu-item a > .avia-menu-subtext{
	font-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

To change the background color of the subtext please use the below code:



/* Subtext background */
#top #header #avia-menu li.menu-item a > .avia-menu-subtext{
	background: #000;
}

Burger/Mobile menu

The Burger/Icon menu is a 3 lined icon menu. When this icon is clicked a slide menu or a fullscreen overlay menu can be activated.

Burger/Mobile menu activation

To activate Burger/Icon menu for desktop go to Enfold > Main menu > General > Menu Items for Desktop and select Icon menu.

To activate Burger/Icon menu for Tablets or Mobile device go to Enfold > Main menu > General > Menu Items for mobile and select the viewport of your choice.

To activate the burger for any custom screen width, update the max-width value in the below code. It is recommended to set the max-width value to be of the screen width just before the elements like the menu starts to run into the logo.


/* Activate burger menu */
 @media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

Note: If you are using Left or Right Sidebar layouts to display your logo and menu, please add following code to Enfold theme options > General Styling > Quick CSS field instead


@media only screen and (min-width: 767px) and (max-width: 990px) {

		/*header*/		
		.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
		.responsive #top #main {padding-top:0 !important; margin:0;}
		.responsive #top #main .container_wrap:first-child{ border-top:none; }
		.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
		
		
		.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
		.responsive .logo a{display:table-cell; vertical-align: middle;} 
		.responsive .logo img{height:80px !important; width:80px !important;  display: block;  max-height: 80px;}
		.responsive #header_main .container{height:auto !important; }
		.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
		.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
		.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
		.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width:  1px;}
		.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
		.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
		.responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
		.responsive #header .social_bookmarks li{float:none; display: inline-block;}
		.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
		.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
		.responsive .logo img{margin:0;}
		.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
		.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}
		
		.responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
		.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
		
		.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, 
		.responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, 
		.responsive #top .av_header_transparency #header_main_alternate, 
		.responsive .av_header_transparency #header_main .social_bookmarks li a,
		.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
		.responsive #top .av_header_transparency #header_meta, 
		.responsive #top .av_header_transparency #header_meta li,
		.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
		.responsive.html_top_nav_header .av-logo-container{height:auto;}
		.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}

/*new mobile*/
		.responsive .av-burger-menu-main{display: block;}
		.responsive #top #wrap_all .main_menu{top:0;height:80px;left:auto;right: 0;display: block;position: absolute;}
		.responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
		.responsive #top .av-main-nav .menu-item{display:none;}
		.responsive #top .av-main-nav .menu-item-avia-special{display:block;     padding-right: 100px !important;}
		.responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
		.responsive #header_main_alternate{display:none;}
		.responsive #top #header .social_bookmarks{display:none;}
		.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
		.responsive #top .av-logo-container .avia-menu{height:100%;}
		.responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #main .av-logo-container .social_bookmarks{display:none;}
		.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
		.responsive #top #main .av-logo-container .main_menu{display:block;}
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a,
		.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
		.responsive #top #wrap_all .av-logo-container {padding-left:10% !important; }
		.responsive #top #header_main > .container .main_menu  .av-main-nav > li > a{
			min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
		}
		.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
		.responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
		}
		.html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
		    margin-top: 0px;
		}
		.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {
		    display: none;
		}
		.html_header_sidebar #menu-item-shop.cart_dropdown {
		    right: 80px;
		    border: none;
		    margin-top: 15px;
		}
		.html_header_sidebar #header .container {
		    width: 85%;
	}
}

Burger Icon

Icon Color: To change the color of the burger menu go to Enfold > Main Menu > Burger/Mobile Menu styling > Menu Icon Color

Icon Size : To change the size of the mobile menu icon go to Enfold > Main Menu > Burger/Mobile menu > Menu Icon Style

To add a background color to the burger icon please use the below CSS

 
/* Burger icon background  */
.av-burger-menu-main.menu-item-avia-special .av-hamburger {
	background: gold;
	padding: 0 25px;
}

To change the color of the burger menu on mouse hover please add the below CSS to your site.


/* Burger menu hover color possible only for desktop*/

.av-burger-menu-main a .av-hamburger-inner,
.av-burger-menu-main a .av-hamburger-inner:before,
.av-burger-menu-main a .av-hamburger-inner:after {    
    background-color: #222;
}

.av-burger-menu-main a:hover .av-hamburger-inner,
.av-burger-menu-main a:hover .av-hamburger-inner:before,
.av-burger-menu-main a:hover .av-hamburger-inner:after {    
    animation: bgcolor .35s forwards;
}


@keyframes bgcolor {
  0% { background: #222; }
  100% { background: red; }
}

@keyframes textcolor {
  0% { color: #222}
  100% { color: red; }
}

To change the burger menu icon color when a user clicks on it and is active please use the below CSS.

 

/* Burger menu active state */
#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner,
#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner:before,
#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner:after {    
    background-color: gold;
}

To display a word menu next to hamburger menu icon please use the CSS below:


/*------------------------*/
/* Add word menu next to hamburger icon
/*------------------------*/
.av-hamburger strong {
    display: block!important;
    position: absolute;
    left: -90%;
    top: 0;
    font-size: 20px;
    transform: translate(-90%, -44%);
}

Replace burger menu icon with custom text



/* Replace burger menu with custom text */

.av-burger-menu-main a .av-hamburger-inner,
.av-burger-menu-main a .av-hamburger-inner:before,
.av-burger-menu-main a .av-hamburger-inner:after {      
    height: 0px;
}

.av-burger-menu-main a::before {
    content: "Custom icon text";
    font-size: 24px;    
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1em;
}

To change the burger menu icon to a custom fontello icon please use the below CSS. Check the Icon element documentation to know more about unicode and choose the icons of your choice for the default and active state.

 
/* Hide the default icon */
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {    
    display:none;
}

/* Custom default icon */
#top #header .av-burger-menu-main a .av-hamburger:before {      
    content:"\e806";
	font-family: 'entypo-fontello';	
	position: absolute;
	font-size:30px;
}

/* Custom active icon */
#top #header .av-burger-menu-main a .av-hamburger.is-active:before {   
content:"\e807" !important;
}

Replace the default burger menu icon with a custom image by changing the URL of the image in the below code and add it to your site.

 
/* Hide the default icon */
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,
#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {    
    display:none;
}

/* Custom default icon */
#top #header .av-burger-menu-main a .av-hamburger:before {      
        content: url(https://domain.com/your-image.png);
	font-family: 'entypo-fontello';	
	position: absolute;
	font-size:30px;
}

/* Custom active icon */
#top #header .av-burger-menu-main a .av-hamburger.is-active:before {   
content:"\e807" !important;
}

To replace the burger icon with the word menu please use the below CSS


#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,
#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,
#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {   
  display:none;
}

/*------------------------*/
/* Replace hamburger icon with the word menu
/*------------------------*/
.av-hamburger strong {
    display: inline-block!important;
    position: absolute;
    left: 100%;
    top: 0;
    font-size: 20px;
    transform: translate(-50%, -50%);
}

If you like to hid the hamburger menu on mobile and display a text menu which has only a couple of links please use the below CSS


/* hide mobile menu icon and display text menu */

@media only screen and (max-width: 767px) {

  #top #header .av-burger-menu-main {
  	display:none;
  }
  
  .responsive #top .av-main-nav .menu-item {
  	display:block !important;
  }

}

To make the burger menu icon display in a fixed position when the page is scrolled please use the below CSS

/* Burger icon background  */
.av-burger-menu-main.menu-item-avia-special .av-hamburger {
	background: gold!important;
	padding: 25px;
	position: fixed;
	right: 0px;
	top:0;
}

/* Icon Position */
.av-hamburger span {
	top: 13px;
}

#header.header-scrolled .av-hamburger span {
	top:0;
}

Burger icon on a transparent header

Icon Color: To change the color of the burger menu icon on a transparent header go to Enfold > Header > Transparency Options > Transparency menu color

To change the icon color using CSS please use the below code:


/* Burger menu icon color on transparent header */

#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner,
#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:before,
#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:after {    
    background-color: gold;
}

Burger/Mobile menu links

A few options to change the burger menu link color:

  1. Enfold options > General styling > Logo area > Logo Area font color
  2. Enfold options > Advanced styling > Menu Links in overlay/slide out > Font Color
  3. To make changes using CSS please use the below code: 
    

/* Burger menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {
    color:gold;
}

To change the font family of the main menu items go to Enfold > Advanced Styling > Menu Links in overlay/slide out > Font Family

To make changes using CSS please use the below code:



/* Burger menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {
    font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

Separator Color: Separator color can be changed from Enfold > Advanced Styling > Menu Links in overlay/slide out > Border Color

Remove Separator: the separators copy and paste the word "transparent" in the color value field.

To add custom menu separator to the enfold menu please disable the default separator from Enfold > Main Menu > General > Separator between menu items and add the below custom CSS to your site.


/*------------------------*/
/*   Remove separator
/*------------------------*/
.responsive #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a {
    border: none;
}

To change the hover background for menu items go to Enfold > Advanced Styling > Menu Links in overlay/slide out > Menu Hover BG

To change the menu link color on hover please use the below code:



/* Overlay menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a:hover {
    color:green;
}

To add custom style to the current page or the active menu link please use the below code:



/* Active menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a {
    color:green;
}

To hide certain menu items on mobile, please go to Appearance > Menu and then check “Screen options” on the top right side and then check “CSS Classes”. After that, a new field will appear under your menu items. Now you can simply edit your menu items and give “only-desktop” custom class to the menu items that you would like to hide on mobile.

Please add following code to Quick CSS in Enfold theme options under General Styling tab to hide your selected menu items on mobile

@media only screen and (max-width: 990px) {
.only-desktop { display: none !important; }}

and to display certain menu items on mobile, please give them custom CSS class “only-mobile” and change your code to following one

@media only screen and (min-width: 990px) {
.only-mobile { display: none !important; }}

Note: Please choose custom CSS classes that do not start with “menu-item”. These classes are not rendered to avoid conflict with main menu.

To align the menu items inside the overlay at the top position, please use the below CSS


/* Align to top */
#top #av-burger-menu-ul {
    display: flex;
    flex-direction: column;
}

For Full Page Overlay Menu

.av-burger-overlay-inner {
    text-align: left;
    padding-left: 20px;
}

Burger/Mobile submenu links

Submenu display settings

To change the submenu display settings go to Enfold > Main Menu > Burger/Mobile menu > Menu Icon Submenu items here you can choose to:

  • Display submenu Always
  • Display submenu on click
  • Display submenu on hover

To clone the Active submenu link got to Enfold > Main Menu > Burger/Mobile menu > Clone title menu items to submenu

Submenu links inherit the same color as the main menu set in Enfold options > Advanced styling > Menu Links in overlay/slide out > Font Color

To add custom color only to the submenu items please use the below code.

 
/* Submenu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a {
    color: #456DEF;
}

Submenu links inherit the font family set in Enfold > Advanced Styling > Menu Links in overlay/slide out > Font Family

To make changes only to the submenu links font style please use the below CSS code:



/* Burger menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a  {     font-family: "HelveticaNeue" Helvetica, Arial, sans-serif; }

Burger/Mobile menu overlay

To activate the flyout menu overlay style go to Enfold > Main Menu > Burger/Mobile Menu > Menu Overlay Style > Sidebar Flyout Menu

To activate the fullscreen overlay menu style go to Enfold > Main Menu > Burger/Mobile Menu > Menu Overlay Style > Fullpage Overlay Menu

Overlay Color: To change the menu overlay color go to Enfold > Advanced Styling > Menu Links in overlay/slide out > Overlay Color

To make changes using CSS please use the below code:



/* Menu overlay */

#top #header .av-burger-overlay-bg {
    background: #2fc;
}

Overlay Opacity: To make changes to the overlay transparency please use the below CSS code:


/* Menu overlay */

#top #header .av-burger-overlay-bg {
    opacity: .9;
}

To change the overlay width pelase use the below CSS:

 

/* Overlay Width */

.responsive #top .av-burger-overlay-scroll {
    width: 550px;
}

When a user clicks the burger menu icon the background content of the overlay can be blured by adding the below CSS to your style.css


.blurMe{
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

and add the below function to your child theme functions.php file.

function avia_custom_blurry(){
?>
 <script>
jQuery('.av-hamburger').on('click', function () {
    jQuery("#main").toggleClass('blurMe');
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_blurry');

Footer menu

Socket menu

To change the footer menu color go to Enfold options > General styling > Socket > Primary color

To make changes using CSS please use the below code:



/* Footer menu links */

#socket .sub_menu_socket li a {
	color: gold;
}

To make changes to the footer menu links using CSS please use the below code:



/* Footer menu links */

#socket .sub_menu_socket li a  {
    font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

NOTE: The fonts should already be installed on your theme for the above code to work. If you have not installed the font please import the fronts from Enfold > Import/Export > Custom Font Manager or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.

Background color: To change the background color of the Socket go to Enfold > General Styling > Socket > Socket background color

Background image: To set the background image of the Socket go to Enfold > General Styling > Socket > Background image

To make changes using CSS please use the below code:



/* Socket Background */

#socket .container {
    background: gold;
}

Remove Separator: To remove the footer menu separators use the below CSS in your site.


#top #socket .sub_menu_socket li {
    border: none;
}

To change the Socket menu hover color go to Enfold options > General styling > Socket > Highlight color

To make changes using CSS please use the below code:



/* Socket menu links */

#socket .sub_menu_socket li a:hover {
	color: gold;
}

By default, footer menu is disabled on the mobile device. To display Footer menu on mobile please add the following CSS code to your site.



/* Display footer menu on mobile */
@media only screen and (max-width: 767px){
.responsive #socket .sub_menu_socket {
    display: block !important;
}}

Sidebar menu

To make changes to the sidebar menu using CSS please use the below code:



/* Sidebar menu links */

.sidebar .menu a {
	color: red;
}

To make changes to the sidebar menu using CSS please use the below code:



/* Sidebar menu links */

.sidebar .menu a {
	font-family: "HelveticaNeue" Helvetica, Arial, sans-serif;
}

To make changes to the sidebar menu using CSS please use the below code:



/* Sidebar menu links */

.sidebar .menu li:hover a {
	color: green;
}

Post Navigation

The post navigation can be enabled or disable from Enfold > Blog Layout > Disable the post navigation

To remove the post navigation image please use the below CSS

 

/* Remove post nav image */

#top .avia-post-nav .entry-image {
    display: none;
}

#top .avia-post-nav .entry-info,
#top .avia-post-nav .entry-title {
    width: auto;
    min-width: 100px;
}

#top .avia-post-next {
    text-align: left;
}


#top .avia-post-prev {
    text-align: right;
}

#top .avia-post-nav:hover .entry-info-wrap {
    width: 150px;
}

#top .avia-post-nav:hover {
    height: auto !important;
}

To change the arrow text and background color please use the below CSS

 
/* Post nav color */
#top .avia-post-nav {
    color: #333;
    background: rgba(235,230,230,0.4);
}

/* Post nav color on hover */
#top .avia-post-nav:hover {
    color: #FFF;
    background: rgba(2550,0,0,0.8);
}

When a user clicks on the post navigation display posts from the same category by adding the below code to your functions.php file

add_filter('avia_post_nav_settings', 'avia_post_nav_settings_mod');
function avia_post_nav_settings_mod($settings)
{
  $settings['is_fullwidth']  = false;
  $settings['same_category'] = true;
  return $settings;
}

You can remove the post navigation from a specific post type by adding this function to your functions.php:

function no_post_nav($entries)
{
if(get_post_type() == 'portfolio') $entries = array();
return $entries;
}

add_filter('avia_post_nav_entries','no_post_nav');

The above now makes it so that when viewing the *portfolio* custom post type (which comes with the theme) there will be no floating navigation to the next or previous portfolio items.

Scroll to top

To remove the scroll top button on desktop please use the below CSS


#scroll-top-link {display: none; }

To change the arrow color or size please use the below CSS


#scroll-top-link:before {
	color: red;
        font-size: 30px;
}

Change the background color using the below CSS


/* Background */
#scroll-top-link {
    background-color: #1ec5bc;
}

To change the shape of the button to a circle please use the below CSS


#scroll-top-link {
    border-radius: 30px;
}

To change the box size and position please use the below CSS



/* Box size and position */
#scroll-top-link{
	width:25px;
	height:25px;
	right: 10px;
	bottom: 10px;
}

/* Arrow position */
#scroll-top-link:before{
	top:-13px;
	right:8px;
	position:absolute;
}

Move scroll top button to the left side


#scroll-top-link { right: auto; left: 50px; }

Display scroll top button on mobile device



@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
  display: block !important;
}}

Mega menu

Take me to the Mega menu documentation.

Fullwidth submenu

Take me to the Fullwidth submenu documentation.

Custom menu styles

One Page menu

Menu items can be linked to different sections of the same page by using Anchors or ID's. For example, the One Page Enfold demos such as:

In the below example let's take a look at re-creating the consulting demo sections and menu.

Open an empty page and add a color section element for each of the section you want to create. In our case we need to add 4 different color section elements to create:

Add a unique Section ID to each section. In the below screenshot, notice we add an anchor ID called "welcome" to the welcome section. We will use this section ID later on to link the menu item and when a user clicks on the welcome menu the page will scroll to the welcome section.

To create a menu that scrolls to different sections when a user clicks on it go to WordPress Dashboard > Appearance > Menu > Create a new menu

Give your menu a name and start adding custom links by clicking on the custom links options.

Since the menu we are creating is for the sections on the same page we can just use the anchor links without the domain name as shown in the below example:

To Link a section on an external site or a different page, we need to use the full path. For example, To link the about us section on the One Page Demo we need to use the full path and the Anchor ID

Example of full URL path:

https://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/#about-us

Note: Section ID's turn into lowercase upon saving so please use lowercase for anchor links

Default menu: If your website has only one page you can simply choose the one-page menu as the main menu from WordPress > Appearance > Menu > One-Page Menu.

Fullwidth submenu: To add a one-page menu on a specific page first disable the header from the page layout options and add a Fullwidth submenu element and choose the one-page menu in the options.

In case you want to add the one-page menu to a specific page as the main menu please check the section different menu on different pages.

Dots Menu

Dots Menu is best suitable for one-page navigation. One page dots menu is a simple fixed menu with several dots and each dot links to a different section of the page.

In this tutorial, let's take a look at modifying a "Fullwidth submenu element"  to look and function like a one-page dots menu.

Before we start, create a one-page menu using a Fullwidth submenu element.

Enable custom CSS class name support from Enfold > Layout Builder > Developer options and give the Fullwidth Submenu a CSS class name "dots-menu". After completing the steps we should have a dots menu that looks similar to the below screenshot.

Copy the below CSS code to your child theme style.css

Header: The main header is optional but if you like to hide the header go to Page > Layout > Header visibility and transparency

Sidebar: If you are using color section element to build different sections of the page it is recommended to dsable the page sidebar from Page > Layout > Sidebar Settings



/*------------------------*/
/*       Dots menu
/*------------------------*/

.dots-menu + .sticky_placeholder {
	display: none;	
	height: 0px !important;
}

#top .dots-menu {
  background: transparent;
  position: fixed!important;
  right: 10px;
  top: 50%!important;
  transform: translateY(-50%);
  border: none!important;
  max-width: 30px!important;
}

#top .dots-menu .av-subnav-menu > li {    
    display: inline!important;
    margin: 10px !important;
}

#top .dots-menu .av-subnav-menu li a {
  border: 1px solid grey;
  max-width: 25px;
  max-height:25px;
  border-radius:25px;  
  overflow:hidden;
  padding: 0 !important;
  border: none!important;
  background: #f3f4f7;
}

#top .dots-menu .av-subnav-menu li a .avia-bullet {
  display: none !important;
}
#top .dots-menu .av-subnav-menu li a .avia-menu-text { 
visibility: hidden;
}

@media only screen and (max-width: 767px) {
.responsive #top .dots-menu {
  background: transparent;
  position: fixed!important;
  right: 0;
  top: 50%!important;
  transform: translateY(-50%);
}}

If you have followed the steps correctly, you should now see a one-page dots menu that links to the different section on the same page.

Justified menu

Menu items can be spread out to take up equal space over the entire column width as seen below.

To achieve this menu layout we will use some custom CSS and specific header settings.

Header settings: Enfold > Header Layout > Logo center, menu below


/*------------------------*/
/*     Equal space menu
/*------------------------*/

#header #header_main_alternate .container{
    width: 100%!important;
    max-width:1220px;
    padding:0!important;
    margin:0!important;
    left:50%;
    transform:translateX(-50%);
}
#avia-menu {
  text-align: center!important;
  display:flex!important;  
}

.av-main-nav > li {       
    flex-grow: 1;
    justify-content: center;
    width: auto!important;
}

.av-main-nav > li > a {
    display: block; 
}

.av-main-nav > li:nth-child(even) {
	background: #cdcdcd;
}

.av-main-nav > li:nth-child(odd) {
	background: #dcdcdc;
}

Multiline menu

To convert your main menu to a multi-line menu please use the below CSS:

Header settings: Enfold > Header Layout > Logo left, menu right


 /* Multi line menu */
.main_menu {
    max-width: 70%;
    margin-top: 10px;
}

ul.menu.av-main-nav {
    display: flex!important;    
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.av-main-nav > li > a {
    line-height: 35px!important;
    height: 35px!important;
  }

Logo Centered split menu

To position, the logo right in the middle of the menu items as shown below

  • In the below CSS code adjust the value of "X" to the number of menu item after which the logo should appear in the line #top #header .av-main-nav li:nth-child(X)
  • Adjust the margin right value for  li:nth-child(x) to be a little more than the width of the logo in the code
  • Once the values are updated to suit your site design your CSS code is ready to use:

Header settings: Enfold > Header > Header Layout > Menu and Logo Position and select Logo left, Menu right.

 /*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
  /* Adjust the width of the logo */
    margin-right:150px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 100px;  
}
}

Customization Tutorials

Add a custom class to your menu items

By adding a custom CSS class name to the menu items we can target specific menu items to make changes.

Go to Appearance > Menu and then check “Screen options” on the top right side.

Here you will notice some advanced options, go ahead and select “CSS Classes” if it is not checked. If it's already selected you do not have to do anything simply skip to the next step.

After the custom class name option is enabled a new field will appear under your menu items. Now you can simply edit your menu items and add a custom class to any menu item so we can target it using CSS.

Add icons to menu item

In this tutorial, we will add custom icons to your existing menu items. Follow the simple workaround as mentioned in the below steps and at the end, your menu should look similar to the below screenshot.

If you do not have a menu assigned to your theme yet go to WordPress Dashboard > Appearance > Menu and create a menu so we can add the icons to the menu item. For step by step instructions to set up a menu please check the Menu Setup section.

The Debug mode will allow you to copy the element shortcodes. Follow the steps to Enable debug mode. So we can copy the icon shortcodes.

Open a blank page and select the icon element from the Advanced Layout Builder. Make sure to set the correct icon size in icon options and copy the icon shortcode.

Now, you should be able to see the icon shortcode in the debug area below.

To add the icons to menu item go to WordPress Dashboard > Appearance > Menu and paste the shortcode for each menu item in the Navigation Label field. It is same as the Link Text or the menu text.

Different menu for different pages

In this tutorial, we will learn how to replace the default menu and display a different menu on specific pages.

  1. Create your additional menus from WordPress > Appearance > Menus and give each menu a unique name.
  2. Install the plugin Zen Menu Logic from WordPress > Plugins > Add New
  3. Select the menu location from WordPress > Settings > Zen Menu Logic 

To change the menu on specific pages go to the page and scroll to the bottom to view the Zen Menu options. Select the menu from the list and save the page to display the new menu.

If you would not like to use a plugin, you can add following code to bottom of Functions.php file of your child theme to display different menu on certain pages as well

add_filter( 'wp_nav_menu_args', 'my_custom_wp_nav_menu_args' );

function my_custom_wp_nav_menu_args( $args = '' ) {

if($args['theme_location'] === 'avia') 
     if( is_page( 12 ) ) { 
          $args['menu'] = 'Anchor Menu'; 
          } else { 
          $args['menu'] = 'Full Menu';
          } 
return $args;
}

In example above, we have 2 different menus. One is named Anchor Menu and that menu has only anchor links. We use this menu on our homepage with one page layout. "12" in the code above is the page ID of our homepage. You would need to replace that with your page ID. Other menu is called Full Menu and we use this menu on our inner pages.

Display a different menu for logged in/logged out users

To display a different menu for logged in and logged out users please update the below code with the menu names and add it to your functions.php file.

Code snippets:

 

/*

Display a different menu for registered users

*/

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

function my_wp_nav_menu_args( $args = '' ) {

if($args['theme_location'] === 'avia') 
     if( is_user_logged_in() ) { 
          $args['menu'] = 'THE NAME OF YOUR LOGGED IN MENU HERE'; 
          } else { 
          $args['menu'] = 'THE NAME OF YOUR LOGGED OUT MENU HERE';
          } 
return $args;
}

Hide top bar on mobile and display the top bar menu in burger menu.

This is one of the most commonly asked questions on our support forum and it can be easily achieved by using a bit of custom code. Please follow the steps mentioned below:

Add the below CSS to your site to hide the top bar menu on mobile.

Note: To hide the top bar on tablets please change the "max-width" value to 990px.


/* Hide Topbar in mobile */
@media only screen and (max-width: 767px) {
    #header_meta {
        display:none;
    }
}

On the mobile, we want to display the main menu items and the top bar menu items.

Example:

If your top bar has 3 menu items:

  • FAQ
  • Support
  • Privacy Policy

And the main menu has the below items:

  • Home
  • About
  • Service
  • Contact

Let's combine both the menu items and create a new menu which we can display to the mobile menu.

Go to Appearance > Menu > Create a new menu and give it a name "mobile menu" and add all of the above menu items.

  • Home
  • About
  • Service
  • Contact
  • FAQ
  • Support
  • Privacy Policy

Lastly, Go to Enfold > Main menu > General > Alternate Menu for Mobile and select the "Mobile menu" we just created in the previous step to display on mobile or tablets 🙂

To enable burger menu on desktop and to have alternate menu on mobile

Currently, it is not possible to display Burger menu on desktop and to display an alternate menu on mobile but there is a very simple solution.

You can go to Appearance > Menus, click “Screen options” on the top right side and enable “CSS Classes”


and then give your menu items custom CSS class “desktop-menu” for menu items for your desktop menu and “mobile-menu” for items for mobile menu and add following code to Enfold theme options > General Styling > Quick CSS


@media only screen and (max-width: 767px) {
.desktop-menu { display: none; }
.mobile-menu { display: block; }
}
.mobile-menu { display: none; }

Troubleshoot

Menu overlaps logo

Depending on your menu item quantity and logo size, your menu items may start to overlap the logo as seen in the below screenshot.

There several ways we can resolve this issue, please try one of the following methods mentioned below:

Adapt position to width: Place the logo and the menu on the left and right edge of the header so they adapt to the browser width.

Go to Enfold > Header > Header Behavior > Let logo and menu position adapt to browser window

If the menu runs in the logo on tablets only, please enable burger menu on tablets from Enfold options > Main Menu > General > Menu Items for mobile.

To switch to a burger menu on desktop go to Enfold options > Main Menu > General > Menu Items for desktop > Display as Icon.

In most cases, reducing the space between the menu items should help. Please use the CSS code below:


/* Reduce the space between the menu items */
@media only screen and (max-width: 1100px) { 
    .av-main-nav > li > a { padding: 0 7px; }
}

Activate the burger menu just before the menu starts to run into the logo by adjusting the max-width value in the code below:


/* Activate burger menu */
 @media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

Enfold Menu Item Limit

Some users will experience a limit to the number of items they can add to their menu. Unfortunately, this manifests as all menu items after the first X (X may be 16, 72, 270, or any number), and the rest will be lost.

This limit is NOT imposed by Enfold or WordPress. The limit is actually a server configuration issue. There are a few easy ways to solve this issue:

Via .htaccess file:

Add the following line to your .htaccess file:

php_value max_input_vars 5000

Via php.ini:

Search for the “max_input_vars” setting in your php.ini file and change it to:

max_input_vars = 5000;

General rule of thumb is: the higher the number in the setting, the more menu items you can create.

If neither of those 2 solutions fixes the problem there are a few other things you can try, which are mentioned here

(Credit for the original article goes to sevenspark.com)