{"id":5873,"date":"2018-02-12T19:19:12","date_gmt":"2018-02-12T10:19:12","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=5873"},"modified":"2022-12-14T15:41:28","modified_gmt":"2022-12-14T15:41:28","slug":"menu","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/menu\/","title":{"rendered":"Menu"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4afyup-032b5f865eb1db4af38ae0ae006ebaac\">\n#top .av-special-heading.av-4afyup-032b5f865eb1db4af38ae0ae006ebaac{\npadding-bottom:5px;\n}\nbody .av-special-heading.av-4afyup-032b5f865eb1db4af38ae0ae006ebaac .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-4afyup-032b5f865eb1db4af38ae0ae006ebaac .av-subheading{\nfont-size:10px;\n}\n<\/style>\n<div  class='av-special-heading av-4afyup-032b5f865eb1db4af38ae0ae006ebaac av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Menu<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-1b5nn5-44ac4ed4a58b535e801171957e66e475 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3lpou41-b072842e7547778fa55240afa9edfbb5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3jxr3gh-fe3a4fdb0ab7e771a4208b23f40255d6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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&#8217;s see how we can create different menus and customize the look and feel of it.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-163-3764ecdcb87c4b0c3ef7890831e96147 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-fa7f8de6a2c038ce0ce31fec3b7f2810 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Menu Setup<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3guv41d-08f25d61bb34d823a67526d3b326de2a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Multiple menus can be created from the WordPress dashboard and each menu can be assigned to a different section\u00a0of the website like the header menu, sidebar menu, footer menu and so on. Let&#8217;s take a look at creating a menu and assign it as the main menu of the theme.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jlvxr6ph-18eec67ce618bc995f9969e3a5ff8bdb av-minimal-toggle  avia-builder-el-7  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-18rmhu2-10b480f20219bbd176c0b971baa62f33'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Step 1: Create a new menu.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Create a new menu.\" data-aria_expanded=\"Click to collapse: Step 1: Create a new menu.\">Step 1: Create a new menu.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Create a new menu<\/strong>: Go to WordPress Dashboard &gt; Appearance &gt; Menu and click on create a new menu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11123\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/01.-Create-new-menu.png\" alt=\"\" width=\"473\" height=\"495\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/01.-Create-new-menu.png 473w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/01.-Create-new-menu-287x300.png 287w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/p>\n<p>Give your menu a custom name such as &#8220;header menu&#8221; or &#8220;footer menu&#8221; so we can later assign it to different sections of the site and click on &#8220;<strong>Create Menu<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11124\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/02.Name-your-menu.png\" alt=\"\" width=\"657\" height=\"197\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/02.Name-your-menu.png 657w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/02.Name-your-menu-300x90.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/02.Name-your-menu-600x180.png 600w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-qnzk8a-3e10fa72398e72dfb258cf2ef4d95f6d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Step 2: Add Menu Items to your menu.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add Menu Items to your menu.\" data-aria_expanded=\"Click to collapse: Step 2: Add Menu Items to your menu.\">Step 2: Add Menu Items to your menu.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Add Menu items<\/strong>: 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 <strong>Blog<\/strong>.<\/p>\n<p>To change the order of the menu items in which they appear just drag the menu item up or down in the Menu Structure.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11125\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items.png\" alt=\"\" width=\"941\" height=\"662\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items.png 941w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items-300x211.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items-768x540.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items-705x496.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/03.Add-menu-items-600x422.png 600w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nw562y-c47493466172cf9aba654a093161ae4a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Step 3: Assign a menu location and save.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Assign a menu location and save.\" data-aria_expanded=\"Click to collapse: Step 3: Assign a menu location and save.\">Step 3: Assign a menu location and save.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Assign and Save menu<\/strong>: Once the menu items are added to the\u00a0<strong>Menu Structure <\/strong>assign the menu to the different sections of the website like the header, footer etc. and finally, don&#8217;t forget to &#8220;<strong>Save Menu<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11126\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.Assign-and-save-menu.png\" alt=\"\" width=\"632\" height=\"279\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.Assign-and-save-menu.png 632w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.Assign-and-save-menu-300x132.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.Assign-and-save-menu-600x265.png 600w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/p>\n<p>If all the steps are successfully performed the menu should appear in the location assigned under the &#8220;<strong>Menu Settings<\/strong>&#8220;.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-162-538d82125fefa25ca68af21d038d65c4 hr-default  avia-builder-el-8  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-161-fe3a3ed81f3d7632e64f094fa22f2fec '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2 id=\"code-snippet\">Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-10  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to 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.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-1b5nn5-159-2f3aa7e87f8f2b0bf9d2d63b56413351 hr-default  avia-builder-el-11  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-158-1b4f50395a41f7e2d8cd98aa95ea669f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Menu Styles and Settings<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3guv41d-160-7b2b7fc2460155b97ae247d29054c126 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold comes with a variety of menu styles, menu locations such as the Main menu,\u00a0Secondary menu, Footer menu, etc.\u00a0Most of the menu settings are located in <strong>Enfold &gt; Main menu<\/strong>\u00a0Check out the settings map to change the menu options below:<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-157-7c6dca57ee972d63c2d2cf4a7f8da1a1 hr-default  avia-builder-el-14  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-156-61cb4579cf62a5fe74ac18c163c1ab1e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Top Bar Menu<\/h2>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-4b27dfd12a325da39f1992e97e5cf5da av-minimal-toggle  avia-builder-el-16  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-17jzf6y-57d75a3860e2c182fcf5212ef6d706fa'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Activate Top Bar Menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Activate Top Bar Menu\" data-aria_expanded=\"Click to collapse: Activate Top Bar Menu\">Activate Top Bar Menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The Top bar menu can be activated from\u00a0<strong>Enfold &gt; Header &gt; Extra Elements &gt; Header Secondary Menu<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-pa5kwa-0ce1ffabb705d7cbbe223732939ce1e3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"Assign a Top Bar Menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Assign a Top Bar Menu\" data-aria_expanded=\"Click to collapse: Assign a Top Bar Menu\">Assign a Top Bar Menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A menu can be assigned to the Top Bar area from WordPress Dashboard &gt; Appearance &gt; Menu<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11170\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.secondary-menu.png\" alt=\"\" width=\"731\" height=\"529\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.secondary-menu.png 731w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.secondary-menu-300x217.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.secondary-menu-705x510.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/04.secondary-menu-600x434.png 600w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-puxlwq-7080581696223a964e1736c403c1fe82'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"Top Bar background color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Top Bar background color\" data-aria_expanded=\"Click to collapse: Top Bar background color\">Top Bar background color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color of the top bar go to\u00a0<strong>Enfold &gt; Advanced Styling &gt; Small bar above Main Menu &gt; Background Color<\/strong><\/p>\n<p>CSS Code to change the background color:<\/p>\n<pre><code>\/* Top Bar background *\/\r\n#top #header_meta {\r\nbackground: gold;\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-25e9gh-5980ba39101bf458ac8d912994178b62'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"Hide Topbar in mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hide Topbar in mobile\" data-aria_expanded=\"Click to collapse: Hide Topbar in mobile\">Hide Topbar in mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To hide the Topbar in mobile use the below CSS<\/p>\n<pre><code>\r\n\/* Hide Topbar in mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n    #header_meta {\r\n        display:none;\r\n    }\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-265wtt-f4727b02411fd038449aa94df9570974'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"Display Topbar only in mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Display Topbar only in mobile\" data-aria_expanded=\"Click to collapse: Display Topbar only in mobile\">Display Topbar only in mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add the below CSS to your site to display the Topbar only in the mobile device.<\/p>\n<pre><code>\r\n\/* Display Topbar only in mobile *\/\r\n\r\n#header_meta {\r\n        display:none;\r\n    }\r\n\r\n@media only screen and (max-width: 767px) {\r\n    #header_meta {\r\n        display:block;\r\n    }\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-155-058b5ff577eb99c3e4c6a42cd3996ff5 hr-default  avia-builder-el-17  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-154-c30b8b2f1ce7c8849484e6aaa91457eb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top bar links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-153-643626dc32ae5f148b6a304c326118a9 av-minimal-toggle  avia-builder-el-19  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-215rh6y-d1fe330ee061a689910fcc6fed168c7c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"Link Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Link Color\" data-aria_expanded=\"Click to collapse: Link Color\">Link Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the link color of the top bar menu items go to\u00a0<strong>Enfold &gt; Advanced Styling &gt; Small bar above Main Menu &gt; Font Color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Top Bar Links *\/\r\n#top #header_meta li a {\t\r\n\tcolor: blue;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3wrfdd-7358027754dc0e659487c6c593e78652'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"Font family\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font family\" data-aria_expanded=\"Click to collapse: Font family\">Font family<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the link font of the top bar menu items go to\u00a0<strong>Enfold &gt; Advanced Styling &gt; Small bar above Main Menu &gt; Font Family<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Top Bar Link font *\/\r\n#top #header_meta li a {\t\r\n\tfont-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-16b7mi2-18d1a8c2b3753689d0e5d2c70c960cff'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the separator color of the top bar menu items go to\u00a0<strong>Enfold &gt; Advanced Styling &gt; Small bar above Main Menu &gt; Border Color<\/strong><\/p>\n<p>To <strong>remove<\/strong> the separators copy and paste the word &#8220;<strong>transparent<\/strong>&#8221; in the color\u00a0value field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11174\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border.png\" alt=\"\" width=\"763\" height=\"144\" \/><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Top Bar Link separator *\/\r\n#top #header_meta li {\t\r\n\tborder:none;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-33l6q9-56f653431627f3dba2e3c3d782859ee8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"Active menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active menu\" data-aria_expanded=\"Click to collapse: Active menu\">Active menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To highlight the top bar active menu please use the below CSS<\/p>\n<pre><code>\r\n\/* Highlight topbar current menu *\/\r\n\r\n#top #header_meta li.current-menu-item a {\r\n\t color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jlcgsq-79a2623c4112469c8a055163d651efa6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the links on mouse hover using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Top Bar Link style on hover *\/\r\n#top #header_meta li.menu-item:hover a {\r\n\tcolor: gold;\r\n\ttext-decoration: none;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-152-02bc7a268418db9b9f4d360be2a4539b hr-default  avia-builder-el-20  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-151-ace1203c6f0b981670abe78e0cc0d4a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top bar sub links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-150-d8fa6c740f8d5f64158ab5b0e24587a9 av-minimal-toggle  avia-builder-el-22  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-87xmrl-6d3ef11b065d46b9ba11d524d709d25b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Sub link font color and style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Sub link font color and style\" data-aria_expanded=\"Click to collapse: Sub link font color and style\">Sub link font color and style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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:<\/p>\n<pre><code>\r\n\r\n\/* Top bar sub link style *\/\r\n#top #wrap_all #header #header_meta .sub_menu ul ul li a {\t\t\r\n    color: #444;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-kdd4x-80e6999a4510fa2c8f69872513ed0c57'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"Link Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Link Background\" data-aria_expanded=\"Click to collapse: Link Background\">Link Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the Top bar menu sub link background color,\u00a0please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Top bar menu sub link background *\/\r\n\r\n#top #wrap_all #header #header_meta .sub_menu ul ul li a {\t\t\r\n    background: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3y7q35-da4c2c38fde6f45b3ec8ecf4dc5674f6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The top bar menu sub links background color can be changed on hover using the below CSS:<\/p>\n<p>You can add more CSS rules like the font color on hover if required.<\/p>\n<pre><code>\r\n\r\n\/* Hover state *\/\r\n#top #wrap_all #header #header_meta .sub_menu ul ul li:hover a {\t\t\r\n    background: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-34wzep-50c8df89bd8c52391f982a39ecbb574d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the default horizontal separators and the border around the sub menu, please use the below CSS.<\/p>\n<p>You can add your own borders styles to the same selector if required.<\/p>\n<pre><code>\r\n\/* Remove default border *\/\r\n#top #wrap_all #header #header_meta .sub_menu ul ul,\r\n#top #wrap_all #header #header_meta .sub_menu ul ul li a {\r\n    border: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-149-7846e8071f0aca5e255f83e4a49a4799 hr-default  avia-builder-el-23  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-148-76cc4fdbeb2cd28578a6285fa06df7da '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top Bar info (Phone\/E-mail)<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-145-41e359134b77d91fee55368308249a22 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Custom information such as phone number, email address and icons can be added to the top bar from <strong>Enfold Options &gt; Header &gt; Extra Elements &gt;\u00a0Phone Number or small info text<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11186\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info.png\" alt=\"\" width=\"486\" height=\"127\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info.png 486w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info-300x78.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><br \/>\n<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-147-7a0f675beca96985d9ccc2356ba09c19 av-minimal-toggle  avia-builder-el-26  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1zqx24q-dee6b03d43724d15d583023642512738'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Info Text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Text\" data-aria_expanded=\"Click to collapse: Info Text\">Info Text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the info text inherits the style options set for the top bar menu.<\/p>\n<p>To make changes only to the info text using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Top Bar phone info *\/\r\n#top #header_meta .phone-info {\r\n\tcolor: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1nlqgmi-1d8e24ed7db2c4e99f82e43ee88650b6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"Info Link\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Link\" data-aria_expanded=\"Click to collapse: Info Link\">Info Link<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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:<\/p>\n<pre><code>\r\n\/* Top Bar phone info link *\/\r\n#top #header_meta .phone-info a{\r\n\tcolor: gold;\r\n\tfont-size: 30px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1dateqy-6eafab2925470e03ac921926de7cbee6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"Hover Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover Style\" data-aria_expanded=\"Click to collapse: Hover Style\">Hover Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Top Bar links hover state*\/\r\n#top #header_meta li.menu-item:hover a,\r\n#top #header_meta .phone-info a:hover{\r\n    color: green;\r\n    text-decoration: none;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2dssp6-7cc14bb8e3cdad2d04a58cb7e6646ade'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"Add icons to top bar\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add icons to top bar\" data-aria_expanded=\"Click to collapse: Add icons to top bar\">Add icons to top bar<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add an icon next to your contact info such as a\u00a0phone or email icon<\/p>\n<ol>\n<li><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">Enable debug mode<\/a><\/li>\n<li>Drop an icon element on to an empty page with desired settings.<\/li>\n<li>Copy the icon shortcode from the debug window to\u00a0<strong>Enfold Options &gt; Header &gt; Extra Elements &gt;\u00a0Phone Number or small info text <\/strong>and place it next to the phone number or email address as shown in the below screenshot.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11186\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info.png\" alt=\"\" width=\"486\" height=\"127\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info.png 486w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-info-300x78.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><br \/>\n<strong>NOTE<\/strong>: To add a custom icon please check the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/icon\/#adding-your-own-fontello-or-flaticon-icons-\" target=\"_blank\" rel=\"noopener\">documentation<\/a>.<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-146-1036ef92bfe10df123f2117c4c1ac519 hr-default  avia-builder-el-27  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-144-0266dae22576551ee681013695f318e4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top Bar info on Transparent header<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-143-85305debcc1c5e8652ed0e4025f6bc10 av-minimal-toggle  avia-builder-el-29  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-7hiudd-667b71405972cd41e1683b7f0269f528'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-22' data-fake-id='#toggle-id-22' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-22' data-slide-speed=\"200\" data-title=\"Info Text on transparent header\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Text on transparent header\" data-aria_expanded=\"Click to collapse: Info Text on transparent header\">Info Text on transparent header<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-22' aria-labelledby='toggle-toggle-id-22' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the info text inherits the style options set for the top bar menu.<\/p>\n<p>To make changes only to the info text using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\r\n\/* Top Bar phone info text on transparent header*\/\r\n#top #header.av_header_transparency #header_meta .phone-info {\r\n\tcolor: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-5tcrz5-2c1e9cc1829fe8aea56bae741f05052c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-23' data-fake-id='#toggle-id-23' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-23' data-slide-speed=\"200\" data-title=\"Info Text on page scroll\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Text on page scroll\" data-aria_expanded=\"Click to collapse: Info Text on page scroll\">Info Text on page scroll<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-23' aria-labelledby='toggle-toggle-id-23' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Use the below CSS to make changes to the Top Bar info text on page scroll:<\/p>\n<pre><code>\r\n\r\n\/* Top Bar phone info text when page is scrolled *\/\r\n#top #header:not(.av_header_transparency) #header_meta .phone-info {\r\n\tcolor: red !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4koeqp-7b359a6df477e3ea9686e301cf0554e9'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-24' data-fake-id='#toggle-id-24' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-24' data-slide-speed=\"200\" data-title=\"Info Link on transparent header\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Link on transparent header\" data-aria_expanded=\"Click to collapse: Info Link on transparent header\">Info Link on transparent header<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-24' aria-labelledby='toggle-toggle-id-24' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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:<\/p>\n<pre><code>\r\n\r\n\/* Top Bar phone info link on transparent header *\/\r\n#top #header.av_header_transparency #header_meta .phone-info a {\r\n\tcolor: gold !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1yn7gh-68234ab99316b3a46fbb21136719b938'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-25' data-fake-id='#toggle-id-25' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-25' data-slide-speed=\"200\" data-title=\"Info Link on page scroll\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Info Link on page scroll\" data-aria_expanded=\"Click to collapse: Info Link on page scroll\">Info Link on page scroll<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-25' aria-labelledby='toggle-toggle-id-25' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Use the below CSS to change the style for clickable top bar info links like a phone number or email address:<\/p>\n<pre><code>\r\n\r\n\/* Top Bar phone info link when page is scrolled *\/\r\n#top #header:not(.av_header_transparency) #header_meta .phone-info a{\r\n\tcolor: red !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-142-fd4b3ebe36d84e788fec3d017dcebc53 hr-default  avia-builder-el-30  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-141-9ec9f64ecf762d2bd8e417f849e9b3f1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top Bar extra elements<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-140-c55ca238284817276690f34c2c67049c av-minimal-toggle  avia-builder-el-32  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-3w3ult-8a5dbb97bfe67184c09885d9c27e3000'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-26' data-fake-id='#toggle-id-26' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-26' data-slide-speed=\"200\" data-title=\"Add a search icon\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add a search icon\" data-aria_expanded=\"Click to collapse: Add a search icon\">Add a search icon<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-26' aria-labelledby='toggle-toggle-id-26' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To display a search icon in the top bar after the secondary menu, you have to<\/p>\n<ol>\n<li>First, activate the top bar menu from <strong>Enfold &gt; Header &gt; Extra Elements &gt; Header Secondary Menu<\/strong><\/li>\n<li><strong>Add the below code to your child theme functions.php<\/strong><br \/>\n<\/li>\n<li><strong>Add the below code to your child theme style.css<\/strong>\n<pre><code>\r\n\/* Top Bar search bar *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\tmargin-left: auto;\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .phone-info span {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ntrfnu-eca56f1df6693059273498f660abadbf'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-27' data-fake-id='#toggle-id-27' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-27' data-slide-speed=\"200\" data-title=\"Add a search bar\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add a search bar\" data-aria_expanded=\"Click to collapse: Add a search bar\">Add a search bar<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-27' aria-labelledby='toggle-toggle-id-27' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a search bar to the top bar:<\/p>\n<ol>\n<li>Enable the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/search\/#search-bar-shortcode\" target=\"_blank\" rel=\"noopener\">search bar shortcode<\/a>.<\/li>\n<li>Copy the below shortcode to <strong>Enfold &gt; Header &gt; Extra Elements &gt;\u00a0Phone Number or small info text<\/strong>\n<pre><code>\r\n[avia_search]\r\n<\/code><\/pre>\n<\/li>\n<li>To align the search bar inline with the other elements, copy the below CSS to your website:\n<pre><code>\r\n\/* Top Bar search bar *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\tmargin-left: auto;\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-15gfiiy-7ab44350edb6354f2e00116b0209d00b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-28' data-fake-id='#toggle-id-28' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-28' data-slide-speed=\"200\" data-title=\"Clickable phone\/email icons\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Clickable phone\/email icons\" data-aria_expanded=\"Click to collapse: Clickable phone\/email icons\">Clickable phone\/email icons<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-28' aria-labelledby='toggle-toggle-id-28' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a clickable phone or email icon:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Enable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>.<\/li>\n<li>Open a new page and drop the icon element of your choice.<\/li>\n<li>Change the icon size to &#8217;20px&#8217;.<\/li>\n<li>Change the link optiion to &#8220;<strong>Set manually<\/strong>&#8221;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11214\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon.png\" alt=\"\" width=\"783\" height=\"106\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon.png 783w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon-300x41.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon-768x104.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon-705x95.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/clickable-icon-600x81.png 600w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/li>\n<li>For a clickable <strong>phone link<\/strong> paste the below code in the link value and edit your phone number:\n<pre><code>\r\ntel:123456789\r\n<\/code><\/pre>\n<\/li>\n<li>For a clickable <strong>email link<\/strong> set up a new icon and paste the below code in the link value and edit your email address:\n<pre><code>\r\nmailto:youremila@domain.com\r\n<\/code><\/pre>\n<\/li>\n<li>Finally copy the icon shortcode to from the debug window to <strong>Enfold Options &gt; Header &gt; Extra Elements &gt; Phone Number or small info text<\/strong><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-tq91gq-6a214258e0e932d1e9c643727e8dc38a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-29' data-fake-id='#toggle-id-29' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-29' data-slide-speed=\"200\" data-title=\"Clickable phone\/email links\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Clickable phone\/email links\" data-aria_expanded=\"Click to collapse: Clickable phone\/email links\">Clickable phone\/email links<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-29' aria-labelledby='toggle-toggle-id-29' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a clickable phone or email text to the top bar copy the below code and paste it in the <strong>Enfold Options &gt; Header &gt; Extra Elements &gt; Phone Number or small info text<\/strong><\/p>\n<ol>\n<li>Set the links for <strong>clickable phone link<\/strong>:<br \/>\n<\/li>\n<li>Set the links for <strong>clickable email link<\/strong>:<br \/>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1wyjtd-704204c3c327e7ddb162428ddfee6ad5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-30' data-fake-id='#toggle-id-30' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-30' data-slide-speed=\"200\" data-title=\"Social Icons\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Social Icons\" data-aria_expanded=\"Click to collapse: Social Icons\">Social Icons<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-30' aria-labelledby='toggle-toggle-id-30' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You can add social icons to the top bar from:<br \/>\n<strong>Enfold Options &gt; Header &gt; Extra Elements &gt;\u00a0Header Social Icons &gt; Display in top bar<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-1b5nn5-139-b01b1c416ac182e39b4b47cfb895d261\">\n#top .hr.hr-invisible.av-1b5nn5-139-b01b1c416ac182e39b4b47cfb895d261{\nheight:20px;\n}\n<\/style>\n<div  class='hr av-1b5nn5-139-b01b1c416ac182e39b4b47cfb895d261 hr-invisible  avia-builder-el-36  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-138-00225f2a73d585e0b761cdec3cbd6d41 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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\u00a0or else the elements may stack up.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-137-8db2d114a03aedd2003fe3576c505737 av-minimal-toggle  avia-builder-el-38  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-rqe0qy-b42c2d7432b76f667030e2e84f50d68c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-31' data-fake-id='#toggle-id-31' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-31' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-31' aria-labelledby='toggle-toggle-id-31' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\/* Top Bar search bar *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\tmargin-left: auto;\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .phone-info span {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-134-fef5144453aa2d15600961f2a00f1c9c hr-default  avia-builder-el-39  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-133-cba49687669360f347234205b6eeb03f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Top Bar elements position<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-132-0c470ef54adae9c12a6191ae347b9647 av-minimal-toggle  avia-builder-el-41  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1o7pcui-ac759327c925e3a15c7da68e38fb387a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-32' data-fake-id='#toggle-id-32' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-32' data-slide-speed=\"200\" data-title=\"Left\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Left\" data-aria_expanded=\"Click to collapse: Left\">Left<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-32' aria-labelledby='toggle-toggle-id-32' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To align the top bar elements to the left, please use the below CSS:<\/p>\n<pre><code>\r\n\r\n\/* Top Bar content alignment *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .phone-info span {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-13raap6-d3b0607820fe7a7f98cc5da5d9b3a503'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-33' data-fake-id='#toggle-id-33' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-33' data-slide-speed=\"200\" data-title=\"Center\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Center\" data-aria_expanded=\"Click to collapse: Center\">Center<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-33' aria-labelledby='toggle-toggle-id-33' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To align the top bar content to the center, please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Top Bar content alignment *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .phone-info span {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-oncofe-de8a1d296ed83212e956c082bf998a55'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-34' data-fake-id='#toggle-id-34' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-34' data-slide-speed=\"200\" data-title=\"Right\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Right\" data-aria_expanded=\"Click to collapse: Right\">Right<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-34' aria-labelledby='toggle-toggle-id-34' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To align the topbar content to the right, please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Top Bar content alignment *\/\r\n\r\n#top #header_meta .container {\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\ttop:0;\r\n}\r\n#top #header_meta .sub_menu,\r\n#top #header_meta .social_bookmarks {\r\n\talign-self: center;\r\n}\r\n\r\n#top #header_meta .phone-info {\r\n\torder: 2;\r\n}\r\n\r\n#top #header_meta .phone-info span {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n\r\n#top #header_meta .sub_menu {\r\n\torder: 1;\r\n}\r\n#top #header_meta .social_bookmarks {\r\n\torder: 3;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-131-72c737cd050df24cdc8e5165c065ef9e hr-default  avia-builder-el-42  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-130-279cc6285da2f1e530d092a00a99ffd8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Main Menu<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-127-3a95a073727e458d176e18f118fda1eb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>For most of the demos, the horizontal menu is already activated by default. The main menu settings can be accessed from\u00a0<strong>Enfold &gt; Main menu &gt; General &gt; Menu Items for Desktop<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-128-674927b6893bd8376624f4f5c87cd85b hr-default  avia-builder-el-45  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-126-e789c9997868b3365efdb8c02903cc99 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu links<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-124-6d08c7eb736a9d218c4fa5d62945be56 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Main menu can be assigned from WordPress <strong>Dashboard &gt; Appearance &gt; Menu <\/strong>for step by step info please check the <a href=\"#menu-setup\">Menu Set up<\/a> section.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-129-2bae2c7b3065da1157a889c2227d36e5 av-minimal-toggle  avia-builder-el-48  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-w6nwsq-7afe175971965d9945d583f1fba5337c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-35' data-fake-id='#toggle-id-35' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-35' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-35' aria-labelledby='toggle-toggle-id-35' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt;\u00a0Logo Area secondary font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu .menu-item &gt; a &gt; .avia-menu-text {\r\ncolor:#24f;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1kpubka-74075e1f94fdbfedfaa62e53241f039e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-36' data-fake-id='#toggle-id-36' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-36' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-36' aria-labelledby='toggle-toggle-id-36' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the font family of the main menu items go to <strong>Enfold &gt; Advanced Styling &gt; Main Menu Links &gt; Font Family<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu .menu-item &gt; a &gt; .avia-menu-text {<\/code> <code>font-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;<\/code> <code>} <\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-k24w22-750ba108f5d844e25f4e2f0ff0556002'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-37' data-fake-id='#toggle-id-37' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-37' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-37' aria-labelledby='toggle-toggle-id-37' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color of the main menu items go to <strong>Enfold &gt; Advanced Styling &gt; Main Menu Links &gt; Background Color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.menu-item &gt; a  {\r\n    background-color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-20zqzze-1ab1d6326544176e9d6e6a5c91fa75f7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-38' data-fake-id='#toggle-id-38' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-38' data-slide-speed=\"200\" data-title=\"Icons in menu items\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Icons in menu items\" data-aria_expanded=\"Click to collapse: Icons in menu items\">Icons in menu items<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-38' aria-labelledby='toggle-toggle-id-38' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#add-icons-to-menu-item\" target=\"_blank\" rel=\"noopener\">icons in the menu links<\/a>\u00a0will inherit\u00a0the same styles applied to the menu links.<\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.menu-item &gt; a &gt; .avia-menu-text .av_font_icon  {\r\n    color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-24e1fmy-21c8ba1e51fdf7848cb0a8ddc0a39cdf'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-39' data-fake-id='#toggle-id-39' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-39' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-39' aria-labelledby='toggle-toggle-id-39' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Remove Separator: <\/strong>To remove the separators go to\u00a0<strong>Enfold &gt; Main Menu &gt; General &gt; Separator<\/strong><\/p>\n<p><strong>Size<\/strong>: Separator size for the menu items can be updated from <strong>Enfold &gt; Main Menu &gt; General &gt; Separator<\/strong><\/p>\n<p><strong>Color<\/strong>: Separator color can be changed from\u00a0<strong>Enfold &gt; Advanced Styling &gt;Main Menu &gt; Border Color<\/strong><\/p>\n<p>To add custom menu separator to the enfold menu please disable the default separator from <strong>Enfold &gt; Main Menu &gt; General &gt; Separator <\/strong>between menu items and add the below custom CSS to your site.<\/p>\n<pre><code>\r\n\/*------------------------*\/\r\n\/*   Custom separator\r\n\/*------------------------*\/\r\nul#avia-menu &gt; li &gt; a:after {\r\n    content: '\/';\r\n    display: inline-block;\r\n    position: relative;\r\n    left: 13px;\r\n}\r\n\r\nul#avia-menu &gt; li:last-child &gt; a:after {\r\n    display: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-b2cy9-9eed8003d5d61e80ac55ae57292bf06f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-40' data-fake-id='#toggle-id-40' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-40' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-40' aria-labelledby='toggle-toggle-id-40' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add a border style to the main menu items from WordPress &gt; Appearance &gt; Menu &gt; Main menu &gt; Menu Item &gt; Click the drop-down arrow to expand the options and select the &#8220;Menu Style&#8221; to be &#8220;Button Style (Bordered)&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11991\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style.png\" alt=\"\" width=\"420\" height=\"297\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style.png 420w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style-300x212.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style-260x185.png 260w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>Now your menu item should look similar to the &#8220;Contact&#8221; menu in the below screenshot<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11993\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-border.png\" alt=\"\" width=\"473\" height=\"86\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-border.png 473w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-border-300x55.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/p>\n<p>The button style applied to the main menu item can be further customized from Enfold &gt; Advanced styling &gt; Main Menu &gt; Menu Item Button with Border.<\/p>\n<p>Example: To add a border radius to the button so it looks like a pill. Change the value of the border-radius field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11992\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style.png\" alt=\"\" width=\"1033\" height=\"164\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style.png 1033w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style-300x48.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style-768x122.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style-1030x164.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style-705x112.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-advanced-style-600x95.png 600w\" sizes=\"auto, (max-width: 1033px) 100vw, 1033px\" \/><\/p>\n<p>If you like to add your own custom styles using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu item with bordered button *\/\r\n\r\n#top .menu-item.av-menu-button-bordered a .avia-menu-text{\r\n  border: 2px solid red !important;\r\n  border-radius: 20px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2o8mr5-10fc1cc06b05cae14f276a510951b6e6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-41' data-fake-id='#toggle-id-41' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-41' data-slide-speed=\"200\" data-title=\"Button styled menu item\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Button styled menu item\" data-aria_expanded=\"Click to collapse: Button styled menu item\">Button styled menu item<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-41' aria-labelledby='toggle-toggle-id-41' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12322\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-buttons.png\" alt=\"\" width=\"393\" height=\"112\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-buttons.png 393w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-buttons-300x85.png 300w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/p>\n<p>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 &gt; Appearance &gt; Menu<\/p>\n<p>Click on the drop-down arrow to expand the menu options and look for the menu style.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12323\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style-2.png\" alt=\"\" width=\"431\" height=\"532\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style-2.png 431w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-style-2-243x300.png 243w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-5ix9gh-f521f3d42a4d9426ff8ad53bb8e9948b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-42' data-fake-id='#toggle-id-42' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-42' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-42' aria-labelledby='toggle-toggle-id-42' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link hover\u00a0color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt;\u00a0Logo Area font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color (Select Apply only to mouse hover state)<\/strong><\/li>\n<li>To make changes using CSS please use the below code:<strong>Main menu text color<\/strong>:\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.menu-item:hover &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<p><strong>Underline color on hover:<\/strong><\/p>\n<pre><code>\r\n\r\n\/* Underline color on hover *\/\r\n#top #avia-menu .menu-item:hover &gt; a &gt; .avia-menu-fx {\r\n    background-color: gold;\r\n    border: none !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3hiqa9-9d11354618e7ed6abd4de65db8f46c84'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-43' data-fake-id='#toggle-id-43' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-43' data-slide-speed=\"200\" data-title=\"Active or Current page menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active or Current page menu\" data-aria_expanded=\"Click to collapse: Active or Current page menu\">Active or Current page menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-43' aria-labelledby='toggle-toggle-id-43' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link Active or Current page menu color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt;\u00a0Logo Area font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color (Select Apply only to active state)<\/strong><\/li>\n<li>To make changes using CSS please use the below code:<strong>Active menu link color<\/strong> :\n<pre><code>\r\n\r\n\/* Main menu text color  *\/\r\n\r\n#top #header #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<p>Active menu underline color:<\/p>\n<p><code><\/code><\/p>\n<pre>\/* Active menu underline color *\/\r\n#top #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-fx {\r\n    background-color: blue;\r\n    border: none !important;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-37r7yp-f22f1cad95776a5092445637e9042ad3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-44' data-fake-id='#toggle-id-44' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-44' data-slide-speed=\"200\" data-title=\"Remove underline from menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove underline from menu\" data-aria_expanded=\"Click to collapse: Remove underline from menu\">Remove underline from menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-44' aria-labelledby='toggle-toggle-id-44' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the underline from the active menu item and also on hover please use the custom CSS below.<\/p>\n<pre><code>\r\n\/*------------------------*\/\r\n\/*  Remove underline\r\n\/*------------------------*\/\r\n\r\n\r\n#top #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-fx,\r\n#top #avia-menu .menu-item:hover &gt; a &gt; .avia-menu-fx {\r\n    background-color: transparent !important;\r\n    border: none !important;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n}\r\n\r\n<\/code><\/pre>\n<p><code><br \/>\n<\/code><\/p>\n<p><code><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-t87lu2-80b04fef0bc78db3e572389cbe5fab70'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-45' data-fake-id='#toggle-id-45' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-45' data-slide-speed=\"200\" data-title=\"Menu position \" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Menu position \" data-aria_expanded=\"Click to collapse: Menu position \">Menu position <span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-45' aria-labelledby='toggle-toggle-id-45' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Once the text menu is set up its position in the header can be changed from\u00a0<strong>Enfold &gt; Header &gt; Header Layout &gt; Menu and Logo Position below<\/strong> are the options available to position the menu inside the header for desktop layout.<\/p>\n<ul>\n<li>Logo left, Menu right<\/li>\n<li>Logo right, Menu Left<\/li>\n<li>Logo left, Menu below<\/li>\n<li>Logo right, Menu below<\/li>\n<li>Logo center, Menu below<\/li>\n<li>Logo center, Menu above<\/li>\n<li>Adapt position to width:\u00a0To place the logo and the menu on the left and right side of the header so they adapt to the browser width go to\u00a0<strong>Enfold &gt; Header &gt; Header Behavior &gt; Let logo and menu position adapt to browser window<\/strong><\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1k7bqne-51f8030ab69c1049113491e902130151'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-46' data-fake-id='#toggle-id-46' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-46' data-slide-speed=\"200\" data-title=\"Hide main menu on desktop\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hide main menu on desktop\" data-aria_expanded=\"Click to collapse: Hide main menu on desktop\">Hide main menu on desktop<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-46' aria-labelledby='toggle-toggle-id-46' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To hide the main menu on the desktop, please use the below CSS.<\/p>\n<pre><code>\r\n\/* Hide main menu *\/\r\n#top .main_menu {\r\n   display:none;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2n5mfl-f897248d9b2db8bc92ebd9e2cd941630'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-47' data-fake-id='#toggle-id-47' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-47' data-slide-speed=\"200\" data-title=\"Disable parent menu link\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Disable parent menu link\" data-aria_expanded=\"Click to collapse: Disable parent menu link\">Disable parent menu link<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-47' aria-labelledby='toggle-toggle-id-47' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To disable the parent menu link so it cannot be clicked and show only the submenu items on hover please follow the below steps.<\/p>\n<ul>\n<li>Please go to Appearance &gt; Menus &gt; Select a menu to edit &gt; Your menu<\/li>\n<li>Expand the &#8220;Custom Links&#8221; options.<\/li>\n<li>Create a parent menu item with its URL as &#8220;#&#8221; so it will not be clickable.<\/li>\n<li>Add the submenu items to the parent menu.<\/li>\n<li>Save your menu.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-125-5a80ad2525fdef0083660e8ade5d42ec hr-default  avia-builder-el-49  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-123-b1b874d038bd2cd911c9ddeef9bd2175 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu sub-text<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-120-cf3fee13f7ef7ae70c1a6544c81d08e7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Learn how to add a subtext to your menu items and change the font color, size and other style values using custom CSS.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-122-98be5f4f7c775e15f7beea330b7a7fca av-minimal-toggle  avia-builder-el-52  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1rx6qoa-8a7197a5f3e360d28ed2255177ddf536'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-48' data-fake-id='#toggle-id-48' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-48' data-slide-speed=\"200\" data-title=\"Step 1: Enable Subtext or Menu Description.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Enable Subtext or Menu Description.\" data-aria_expanded=\"Click to collapse: Step 1: Enable Subtext or Menu Description.\">Step 1: Enable Subtext or Menu Description.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-48' aria-labelledby='toggle-toggle-id-48' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Enable the &#8220;Description&#8221; field for the menu items from WordPress Dashboard &gt; Appearance &gt; Menus &gt; Screen Options (on the top right of the page).<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11244\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options.png\" alt=\"\" width=\"966\" height=\"335\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options.png 966w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options-300x104.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options-768x266.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options-705x244.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Screen-options-600x208.png 600w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-117u46i-8e8b02801011cd62958321743c30478c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-49' data-fake-id='#toggle-id-49' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-49' data-slide-speed=\"200\" data-title=\"Step 2: Add Subtext\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add Subtext\" data-aria_expanded=\"Click to collapse: Step 2: Add Subtext\">Step 2: Add Subtext<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-49' aria-labelledby='toggle-toggle-id-49' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add the description or subtext for the menu items and click on the <strong>Save Menu<\/strong> button.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11245\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description.png\" alt=\"\" width=\"601\" height=\"606\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description.png 601w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-80x80.png 80w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-298x300.png 298w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-36x36.png 36w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-180x180.png 180w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-100x100.png 100w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-description-600x605.png 600w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-u1oka2-c1866ab1c908539df88fb06dde5d26be'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-50' data-fake-id='#toggle-id-50' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-50' data-slide-speed=\"200\" data-title=\"Step 3: Subtext Styles\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Subtext Styles\" data-aria_expanded=\"Click to collapse: Step 3: Subtext Styles\">Step 3: Subtext Styles<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-50' aria-labelledby='toggle-toggle-id-50' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>For the vertical menu,\u00a0the description should show fine by default.<br \/>\nFor\u00a0the horizontal menu add the below CSS and adjust the style values to suit your design.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11246\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-subtext.png\" alt=\"\" width=\"627\" height=\"119\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-subtext.png 627w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-subtext-300x57.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/menu-subtext-600x114.png 600w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><\/p>\n<pre><code>\r\n\r\n\/* Main menu subtext *\/\r\n\r\n#top #header #avia-menu li.menu-item a &gt; .avia-menu-subtext{\r\n\tdisplay: flex;\r\n\tmargin-top: -60px;\r\n\tcolor: gold;\r\n\tfont-size: 12px;\r\n\tfont-weight: lighter;\r\n\tletter-spacing: 0.15em;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-121-a58c055e87a6edbf87ccb2286c645db5 hr-default  avia-builder-el-53  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-119-4ebc5f46127f08f15f98a24d179f02e6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu sub-links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-118-a6f15e23ea600d43d225d1aaab600139 av-minimal-toggle  avia-builder-el-55  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-199fctm-ed53291cb3504359e1d9a85146dbd946'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-51' data-fake-id='#toggle-id-51' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-51' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-51' aria-labelledby='toggle-toggle-id-51' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the sub menu link color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu sublevel\u00a0 links &gt; Font Color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #header #avia-menu .sub-menu li.menu-item a .avia-menu-text {\t\r\n\tcolor: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jgxux6-66d9b4f6c796776c297edc00b15233dd'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-52' data-fake-id='#toggle-id-52' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-52' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-52' aria-labelledby='toggle-toggle-id-52' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n#top #header #avia-menu .sub-menu li.menu-item,\r\n#top #header #avia-menu .sub-menu li.menu-item a span.avia-menu-text {\t\t\r\n\tfont-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1abco22-f387707071d9fdb2faf6170c1608ecd8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-53' data-fake-id='#toggle-id-53' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-53' data-slide-speed=\"200\" data-title=\"Link Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Link Background\" data-aria_expanded=\"Click to collapse: Link Background\">Link Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-53' aria-labelledby='toggle-toggle-id-53' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color of the sublevel menu items go to <strong>Enfold &gt; Advanced Styling &gt; Main menu\u00a0sublevel links &gt; Background Color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #wrap_all #header .av-main-nav ul &gt; li &gt; a {\t\t\r\n    background: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-skvex6-6db10f6f057cc62f5b143874b43718ad'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-54' data-fake-id='#toggle-id-54' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-54' data-slide-speed=\"200\" data-title=\"Submenu dropdown with transparent background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Submenu dropdown with transparent background\" data-aria_expanded=\"Click to collapse: Submenu dropdown with transparent background\">Submenu dropdown with transparent background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-54' aria-labelledby='toggle-toggle-id-54' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To custom style the main menu dropdown background and add some transparency please use the below CSS<\/p>\n<pre><code> \r\n\/* Submenu transparent dropdown *\/\r\n#top #wrap_all #header.av_header_transparency .av-main-nav ul &gt; li &gt; a {\t\t\r\n    background: transparent;\r\n    border: none;\r\n}\r\n\r\n#top #wrap_all #header.av_header_transparency .av-main-nav ul {\r\n\tbackground: rgba(0,0,0,.5);\t\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jfxf6y-40023731c2641e13f6c2b70e8621c649'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-55' data-fake-id='#toggle-id-55' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-55' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-55' aria-labelledby='toggle-toggle-id-55' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Remove Border: <\/strong>The submenu dropdown border can be removed by adding the word &#8220;transparent&#8221; as the border color\u00a0value in\u00a0<strong>Enfold &gt; Advanced Styling &gt; Main Menu sublevel Links &gt; Border Color<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11255\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border.png\" alt=\"\" width=\"672\" height=\"163\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border.png 672w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border-300x73.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border-600x146.png 600w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><br \/>\n<\/strong><\/p>\n<p><strong>Border Color<\/strong>: Border\u00a0color can be changed from\u00a0<strong>Enfold &gt; Advanced Styling &gt; Main Menu sublevel Links &gt; Border Color<\/strong><\/p>\n<p>To add custom border style please use the below code in your site and adjust the values as required.<\/p>\n<pre><code>\r\n\/* Main menu sublevel *\/\r\n#top #wrap_all #header .av-main-nav ul {\t\t\r\n    border: 4px solid red;\r\n}\r\n\r\n#top #wrap_all #header .av-main-nav ul &gt; li &gt; a {\t\t\r\n    \/*background: red;*\/\r\n    border-width: 0;\r\n    border-style: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1186z56-df7c3a5465ea3683bb5ad1ceba1fdb02'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-56' data-fake-id='#toggle-id-56' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-56' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-56' aria-labelledby='toggle-toggle-id-56' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the link hover\u00a0color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt;\u00a0Logo Area font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu sublevel Links\u00a0<\/strong>Make changes and Select <strong>Apply only to mouse hover state<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #wrap_all #header #avia-menu ul li:hover a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-sgiy7e-a8f55a20a6d12d58b39875415a16030c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-57' data-fake-id='#toggle-id-57' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-57' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-57' aria-labelledby='toggle-toggle-id-57' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Changes the active submenu links using the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #wrap_all #header #avia-menu ul li.current-menu-item a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<p>To style the parent menu if a submenu page is active please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n#top #wrap_all #header #avia-menu li.active-parent-item &gt; a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-l06vuy-febc6b911ad425c480f5b8fb7f601915'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-58' data-fake-id='#toggle-id-58' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-58' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-58' aria-labelledby='toggle-toggle-id-58' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a horizontal separator to the sublevel menu items please use the below CSS.<\/p>\n<pre><code>\r\n\/* Main menu sublevel *\/\r\n#top #wrap_all #header #avia-menu ul li.menu-item &gt; a {\t\t\r\n     border-bottom: 1px solid black;  \r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1yacht-c8a7232b6ed763205a2c0a4bd84c7ac3'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-59' data-fake-id='#toggle-id-59' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-59' data-slide-speed=\"200\" data-title=\"Display Submenu on hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Display Submenu on hover\" data-aria_expanded=\"Click to collapse: Display Submenu on hover\">Display Submenu on hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-59' aria-labelledby='toggle-toggle-id-59' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Display submenu on hover.<\/p>\n<p>1. Go to Appearance &gt; Menus<\/p>\n<p>2. Select custom links from the menu options.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12503\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover.png\" alt=\"\" width=\"792\" height=\"409\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover.png 792w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover-300x155.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover-768x397.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover-705x364.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/submenu-on-hover-600x310.png 600w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/p>\n<p>3. Add a new parent menu item in the &#8220;link text&#8221; and use &#8221; # &#8221; for the URL field and click on Add to menu.<\/p>\n<p>4. Drag and drop the submenu items to indent under the parent menu item \ud83d\ude42<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-117-819993d8f4648ea83215e9ae6f140039 hr-default  avia-builder-el-56  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-116-6323c938937182cfe62e4aa4c5e39dc7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu on transparent header<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-115-d110cdd919441d49298364be36d53021 av-minimal-toggle  avia-builder-el-58  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-20htuoa-27b2b3e3302ca5b8b65cea7b1434898d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-60' data-fake-id='#toggle-id-60' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-60' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-60' aria-labelledby='toggle-toggle-id-60' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link color on transparent header:<\/p>\n<ol>\n<li><strong>Enfold options &gt; Header &gt; Transparency Options &gt; Transparency menu color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu on transparent header *\/\t\r\n\r\n#top #header.av_header_transparency #avia-menu &gt; .menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1r5qnoq-57abe1902bdd98779f60df7fba41bf24'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-61' data-fake-id='#toggle-id-61' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-61' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-61' aria-labelledby='toggle-toggle-id-61' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The menu items on the transparent header inherit the font styles of the default menu.<\/p>\n<p>To make changes to the transparent header menu please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on transparent header *\/\t\r\n#top #header.av_header_transparency #avia-menu &gt; .menu-item &gt; a &gt; .avia-menu-text {\r\n    font-family:'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-162r9pm-ce3d23eb4f7008e66ec8e32d1cd5bf7f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-62' data-fake-id='#toggle-id-62' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-62' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-62' aria-labelledby='toggle-toggle-id-62' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the background color\u00a0of the menu is transparent.\u00a0To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on transparent header *\/\t\r\n\r\n#top #wrap_all #header.av_header_transparency .main_menu {\r\n\tbackground:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-15hst7u-d5f433bdf9fee09982103b4ac3e99d34'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-63' data-fake-id='#toggle-id-63' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-63' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-63' aria-labelledby='toggle-toggle-id-63' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the main menu link hover\u00a0color on a transparent header please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on transparent header *\/\t\r\n\r\n#header.av_header_transparency ul#avia-menu &gt; li.menu-item:hover &gt; a &gt; .avia-menu-text {\r\n\tcolor: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-24or8iy-9076833da190656dfbc4c6d0d33fffe7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-64' data-fake-id='#toggle-id-64' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-64' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-64' aria-labelledby='toggle-toggle-id-64' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will change the color of the main menu links for the active page:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header.av_header_transparency #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-114-49d206dddbbe5aa622f5b1932eb01128 hr-default  avia-builder-el-59  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-113-2943a09279641216199850f011667713 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu sub-links on transparent header<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-112-fb46648138a2166fca199de005f74010 av-minimal-toggle  avia-builder-el-61  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1izqt62-efcced33dd18dc4c95d3be5dd184a779'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-65' data-fake-id='#toggle-id-65' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-65' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-65' aria-labelledby='toggle-toggle-id-65' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The sub menu link color\u00a0can be changed frm\u00a0<strong>Enfold options &gt; Advanced styling &gt; Main menu sublevel\u00a0 links &gt; Font Color <\/strong>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:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #header.av_header_transparency #avia-menu .sub-menu li.menu-item a .avia-menu-text {\t\r\n\tcolor: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1bxn06i-98469a5147cc74b5591c98dc0ea5bd4a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-66' data-fake-id='#toggle-id-66' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-66' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-66' aria-labelledby='toggle-toggle-id-66' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Use the below CSS to change the sublevel menu background only on the transparent header:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #wrap_all #header.av_header_transparency .av-main-nav ul &gt; li &gt; a {\t\t\r\n    background: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-26pt4ga-f65f49658a3c887b118e89462d7b8882'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-67' data-fake-id='#toggle-id-67' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-67' data-slide-speed=\"200\" data-title=\"Border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Border\" data-aria_expanded=\"Click to collapse: Border\">Border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-67' aria-labelledby='toggle-toggle-id-67' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Remove Border: <\/strong>The submenu border can be removed by adding the word &#8220;transparent&#8221; as the border color\u00a0value in\u00a0<strong>Enfold &gt; Advanced Styling &gt; Main Menu sublevel Links &gt; Border Color<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11255\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border.png\" alt=\"\" width=\"672\" height=\"163\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border.png 672w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border-300x73.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/sublevel-border-600x146.png 600w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><br \/>\n<\/strong><\/p>\n<p><strong>Border Color<\/strong>: Border\u00a0color can be changed from\u00a0<strong>Enfold &gt; Advanced Styling &gt; Main Menu sublevel Links &gt; Border Color<\/strong><\/p>\n<p>To add custom border style only on the transparent header please use the below code and adjust the values as required.<\/p>\n<pre><code>\r\n\/* Main menu sublevel *\/\r\n#top #wrap_all #header.av_header_transparency .av-main-nav ul {\t\t\r\n    border: 4px solid red;\r\n}\r\n\r\n#top #wrap_all #header.av_header_transparency .av-main-nav ul &gt; li &gt; a {\t\t\r\n    border-width: 0;\r\n    border-style: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1fbxfu2-9b612529c941a923f98d1a182405b9b0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-68' data-fake-id='#toggle-id-68' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-68' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-68' aria-labelledby='toggle-toggle-id-68' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the hover state on transparent header please use the below CSS code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel *\/\r\n\r\n#top #wrap_all #header.av_header_transparency #avia-menu ul li:hover a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1a5c6ui-b0312768bbf85cd4ab54191d50fc865a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-69' data-fake-id='#toggle-id-69' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-69' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-69' aria-labelledby='toggle-toggle-id-69' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To custom style the active submenu links on a transparent header use the below CSS code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel on transparent *\/\r\n\r\n#top #wrap_all #header.av_header_transparency #avia-menu ul li.current-menu-item a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<p>To style the parent menu if a submenu page is active please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu sublevel on transparent *\/\r\n#top #wrap_all #header.av_header_transparency #avia-menu li.active-parent-item &gt; a {\t\t\r\n    color: #FFF;\r\n    background: red;    \r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-n5cnuy-13a36b1be22a3bb09f43840d660383f2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-70' data-fake-id='#toggle-id-70' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-70' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-70' aria-labelledby='toggle-toggle-id-70' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a horizontal separator to the sublevel menu items on a transparent header please use the below CSS.<\/p>\n<pre><code>\r\n\/* Main menu sublevel *\/\r\n#top #wrap_all #header.av_header_transparency #avia-menu ul li.menu-item &gt; a {\t\t\r\n     border-bottom: 1px solid black;  \r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-111-74244f7be747463e444eb9c4ee5c0aa8 hr-default  avia-builder-el-62  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-110-e6f7b0b264c2ee23d56ae2b20342f9f3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Main menu on shrinking header<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-107-243c65fd789a81cff2c000b0b087b9eb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Shrinking header on page scroll can be activated from <strong>Enfold &gt; Header &gt; Header Behavior &gt;\u00a0Sticky Header &gt; Shrinking Header<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-109-d57312b5516c6046372cc8cae1268fd0 av-minimal-toggle  avia-builder-el-65  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-21fxzmy-032c5293c895c646b46ea5a636e8b37d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-71' data-fake-id='#toggle-id-71' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-71' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-71' aria-labelledby='toggle-toggle-id-71' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The shrinking header menu inherits the styles form the default header. To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on shrinking header *\/\t\r\n\r\n#top #header.header-scrolled-full #avia-menu &gt; .menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1pcjoy2-bfebbaf534ba4a1f879eaf89496e02c5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-72' data-fake-id='#toggle-id-72' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-72' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-72' aria-labelledby='toggle-toggle-id-72' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>By default, the background color\u00a0of the menu is transparent.\u00a0To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on shrinking header *\/\t\r\n\r\n#top #wrap_all #header.header-scrolled-full .main_menu {\r\n\tbackground:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-16fhy22-5229969cd03ff7564ba9001777084cfb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-73' data-fake-id='#toggle-id-73' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-73' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-73' aria-labelledby='toggle-toggle-id-73' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the main menu link hover\u00a0color on a transparent header please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu on shrinking header *\/\t\r\n\r\n#header.header-scrolled-full ul#avia-menu &gt; li.menu-item:hover &gt; a &gt; .avia-menu-text {\r\n\tcolor: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nqnzbe-f890857cb831925d7ab3159ac298fa7b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-74' data-fake-id='#toggle-id-74' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-74' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-74' aria-labelledby='toggle-toggle-id-74' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below code will change the color of the main menu links for the active page:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header.header-scrolled-full #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-108-a6b748766cbddede329e48a2d0a83374 hr-default  avia-builder-el-66  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-106-ea4008fe595fbc4b52915c64779c9237 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Vertical menu<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-103-f7f78a197665354316dd9e0f1a500868 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the menu appearance to vertical menu go to\u00a0<strong>Enfold &gt; General Layout &gt; Layout &gt; Logo and Main Menu<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-104-620ba97692bc0e454b9e89938f6ba821 hr-default  avia-builder-el-69  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-102-0d6f8f04861807b320a48df702b1e755 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Vertical menu links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-105-c369a64d88ecff2fa1360ae8ae1b56fb av-minimal-toggle  avia-builder-el-71  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-197a71m-906290cb0893b5daf4d50dffa05a9a6f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-75' data-fake-id='#toggle-id-75' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-75' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-75' aria-labelledby='toggle-toggle-id-75' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt; Logo Area Heading color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Vertical header menu links *\/\r\n\r\n#top #header.av_header_sidebar #avia-menu .menu-item &gt; a &gt; .avia-menu-text {\r\n    color:#24f;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-vaxi96-d6ab1d355f015ce774f66f6dc0cef49e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-76' data-fake-id='#toggle-id-76' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-76' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-76' aria-labelledby='toggle-toggle-id-76' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the font family of the main menu items go to <strong>Enfold &gt; Advanced Styling &gt; Main Menu Links &gt; Font Family<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header.av_header_sidebar #avia-menu .menu-item &gt; a &gt; .avia-menu-text {<\/code> <code>font-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;<\/code> <code>} <\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1d397d6-b8f46d57838ff2c97153f577c0805493'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-77' data-fake-id='#toggle-id-77' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-77' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-77' aria-labelledby='toggle-toggle-id-77' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color of the main menu items go to <strong>Enfold &gt; Advanced Styling &gt; Main Menu Links &gt; Background Color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.menu-item &gt; a  {\r\n    background-color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-txzobu-45d7181ac4911b35910595dc283c471f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-78' data-fake-id='#toggle-id-78' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-78' data-slide-speed=\"200\" data-title=\"Separator\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separator\" data-aria_expanded=\"Click to collapse: Separator\">Separator<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-78' aria-labelledby='toggle-toggle-id-78' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Separator <\/strong>color of the vertical menu items can be changed from\u00a0<strong>Enfold &gt; Advanced Styling &gt; Main Menu &gt; Border Color<\/strong><\/p>\n<p>To <strong>remove<\/strong> the separators copy and paste the word &#8220;<strong>transparent<\/strong>&#8221; in the color\u00a0value field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11174 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897.png\" alt=\"\" width=\"761\" height=\"89\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897.png 761w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-300x35.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-705x82.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-600x70.png 600w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/p>\n<p>To remove the separator using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Vertical menu separator *\/\r\n#top #header ul#avia-menu &gt; li &gt; a {\r\n    border: none;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\r\n\/* Vertical menu separator *\/\r\n#top #header ul#avia-menu &gt; li &gt; a {\r\n    border-bottom: 5px solid red;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-6da9hm-d310898e6f17f61e35950fa33dd7c834'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-79' data-fake-id='#toggle-id-79' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-79' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-79' aria-labelledby='toggle-toggle-id-79' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link hover\u00a0color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt;\u00a0Logo Area font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color (Select Apply only to mouse hover state)<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.menu-item:hover &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-156yq0a-7a8ed0f95069fcd6612c55b7335efbb2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-80' data-fake-id='#toggle-id-80' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-80' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-80' aria-labelledby='toggle-toggle-id-80' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link Active or Current page menu color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color (Select Apply only to active state)<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu links *\/\r\n\r\n#top #header #avia-menu li.current-menu-item &gt; a &gt; .avia-menu-text {\r\n\tcolor:red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ryfdey-fd8237f5266ecd97f964ace3418c6761'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-81' data-fake-id='#toggle-id-81' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-81' data-slide-speed=\"200\" data-title=\"Vertical menu content alignment\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Vertical menu content alignment\" data-aria_expanded=\"Click to collapse: Vertical menu content alignment\">Vertical menu content alignment<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-81' aria-labelledby='toggle-toggle-id-81' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The header content of the vertical menu can be aligned from <strong>Enfold &gt; General Layout &gt; Layout &gt;\u00a0Content Alignment<\/strong><\/p>\n<ul>\n<li>Center align<\/li>\n<li>Left align<\/li>\n<li>Right align<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-101-fcc50fd9917321957e08e356d7c9c8ab hr-default  avia-builder-el-72  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-100-0cc901a5fe71a96ebf57f38de0b0e708 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Vertical menu sub-text<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-97-42b2536efe3ed3e25684697df7cb7be1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The vertical menu subtext is set up the same way as we did for the main menu subtext in the <a href=\"#main-menu\">Main menu<\/a> section.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-99-830094f84d2b71a7fccf05e5ddaea4ee av-minimal-toggle  avia-builder-el-75  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1tl2y4q-699d13f414d43f87117995fd1aef4d20'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-82' data-fake-id='#toggle-id-82' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-82' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-82' aria-labelledby='toggle-toggle-id-82' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the main menu link color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt; Logo Area secondary font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Main menu links &gt; Font Color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Main menu subtext *\/\r\n\r\n#top #header #avia-menu li.menu-item a &gt; .avia-menu-subtext{\r\n\tcolor: #cdcfd0;\r\n}}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-10v3fu2-ea4ed7599f4a2d16649087683c0ba2d6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-83' data-fake-id='#toggle-id-83' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-83' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-83' aria-labelledby='toggle-toggle-id-83' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the font style of the subtext please use the below CSS code:<\/p>\n<pre><code>\r\n\r\n\/* Main menu subtext *\/\r\n\r\n#top #header #avia-menu li.menu-item a &gt; .avia-menu-subtext{\r\n\tfont-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-idrjbe-7a051fdd67221d187897a2e6cf79eab5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-84' data-fake-id='#toggle-id-84' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-84' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-84' aria-labelledby='toggle-toggle-id-84' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color of the subtext\u00a0please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Subtext background *\/\r\n#top #header #avia-menu li.menu-item a &gt; .avia-menu-subtext{\r\n\tbackground: #000;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-98-83c947326ba464e44b63ba4cad347b18 hr-default  avia-builder-el-76  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-96-e1a8c79a9043f96575e457eaebdeadc8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Burger\/Mobile menu<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-93-e5c022bc4c989185aa30e0f11f0c10f9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-94-211ba0db565ece5c47fbf67d3a88a0d9 hr-default  avia-builder-el-79  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-92-8d8d705d7ee04845b184749b261e7195 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger\/Mobile menu activation<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-95-9b56b43d7678dc5aa6de211a4342e5aa av-minimal-toggle  avia-builder-el-81  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-wz4fii-759fb7d459ac08afca3a8996c44a567a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-85' data-fake-id='#toggle-id-85' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-85' data-slide-speed=\"200\" data-title=\"Desktop\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Desktop\" data-aria_expanded=\"Click to collapse: Desktop\">Desktop<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-85' aria-labelledby='toggle-toggle-id-85' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To activate Burger\/Icon menu for desktop go to\u00a0<strong>Enfold &gt; Main menu &gt; General &gt; Menu Items for Desktop\u00a0<\/strong>and select Icon menu.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-19q3hre-691e0ee2866882e5d56cd3a423b90607'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-86' data-fake-id='#toggle-id-86' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-86' data-slide-speed=\"200\" data-title=\"Tablet and Mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Tablet and Mobile\" data-aria_expanded=\"Click to collapse: Tablet and Mobile\">Tablet and Mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-86' aria-labelledby='toggle-toggle-id-86' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To activate Burger\/Icon menu for Tablets or Mobile device go to\u00a0<strong>Enfold &gt; Main menu &gt; General &gt; Menu Items for mobile\u00a0<\/strong>and select the viewport of your choice.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2q4sgh-b2c2ab06a180e56026741604f2ab0e17'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-87' data-fake-id='#toggle-id-87' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-87' data-slide-speed=\"200\" data-title=\"Custom Screen Width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom Screen Width\" data-aria_expanded=\"Click to collapse: Custom Screen Width\">Custom Screen Width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-87' aria-labelledby='toggle-toggle-id-87' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<pre><code>\r\n\/* Activate burger menu *\/\r\n @media only screen and (max-width: 1224px) {\r\n#top #header .av-main-nav &gt; li.menu-item  {\r\n    display: none!important;\r\n}\r\n#top #header .av-burger-menu-main {\r\n    cursor: pointer;\r\n    display: block!important;\r\n}}\r\n<\/code><\/pre>\n<p><strong>Note:\u00a0<\/strong>If you are using Left or Right Sidebar layouts to display your logo and menu, please add following code to <strong>Enfold theme options<\/strong> &gt; <strong>General Styling<\/strong> &gt; <strong>Quick CSS<\/strong> field instead<\/p>\n<pre><code>\r\n@media only screen and (min-width: 767px) and (max-width: 990px) {\r\n\r\n\t\t\/*header*\/\t\t\r\n\t\t.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}\r\n\t\t.responsive #top #main {padding-top:0 !important; margin:0;}\r\n\t\t.responsive #top #main .container_wrap:first-child{ border-top:none; }\r\n\t\t.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; }\r\n\t\t\r\n\t\t\r\n\t\t.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }\r\n\t\t.responsive .logo a{display:table-cell; vertical-align: middle;} \r\n\t\t.responsive .logo img{height:80px !important; width:80px !important;  display: block;  max-height: 80px;}\r\n\t\t.responsive #header_main .container{height:auto !important; }\r\n\t\t.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }\r\n\t\t.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}\r\n\t\t.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}\r\n\t\t.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}\r\n\t\t.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width:  1px;}\r\n\t\t.responsive #header .sub_menu, .responsive #header_meta .sub_menu&gt;ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}\r\n\t\t.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}\r\n\t\t.responsive #header_meta .sub_menu&gt;ul&gt;li{float:none; display: inline-block; padding: 0 10px;}\r\n\t\t.responsive #header .social_bookmarks li{float:none; display: inline-block;}\r\n\t\t.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}\r\n\t\t.responsive.bottom_nav_header.social_header .main_menu&gt;div{height:auto;}\r\n\t\t.responsive .logo img{margin:0;}\r\n\t\t.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}\r\n\t\t.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}\r\n\t\t\r\n\t\t.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;}\r\n\t\t.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}\r\n\t\t\r\n\t\t.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child &gt; li &gt; a, \r\n\t\t.responsive #top #wrap_all .av_header_transparency .sub_menu &gt; ul &gt; li &gt; a, \r\n\t\t.responsive #top .av_header_transparency #header_main_alternate, \r\n\t\t.responsive .av_header_transparency #header_main .social_bookmarks li a,\r\n\t\t.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,\r\n\t\t.responsive #top .av_header_transparency #header_meta, \r\n\t\t.responsive #top .av_header_transparency #header_meta li,\r\n\t\t.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}\r\n\t\t.responsive.html_top_nav_header .av-logo-container{height:auto;}\r\n\t\t.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}\r\n\r\n\/*new mobile*\/\r\n\t\t.responsive .av-burger-menu-main{display: block;}\r\n\t\t.responsive #top #wrap_all .main_menu{top:0;height:80px;left:auto;right: 0;display: block;position: absolute;}\r\n\t\t.responsive .main_menu ul:first-child &gt; li a { height: 80px; line-height: 80px;}\r\n\t\t.responsive #top .av-main-nav .menu-item{display:none;}\r\n\t\t.responsive #top .av-main-nav .menu-item-avia-special{display:block;     padding-right: 100px !important;}\r\n\t\t.responsive #top #wrap_all .menu-item-search-dropdown &gt; a { font-size: 24px; }\r\n\t\t.responsive #header_main_alternate{display:none;}\r\n\t\t.responsive #top #header .social_bookmarks{display:none;}\r\n\t\t.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}\r\n\t\t.responsive #top .av-logo-container .avia-menu{height:100%;}\r\n\t\t.responsive #top .av-logo-container .avia-menu &gt; li &gt; a{line-height: 80px;}\r\n\t\t.responsive #top #main .av-logo-container .main_menu{display:block;}\r\n\t\t.responsive #top #main .av-logo-container .social_bookmarks{display:none;}\r\n\t\t.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}\r\n\t\t.responsive #top #main .av-logo-container .main_menu{display:block;}\r\n\t\t.responsive #top #header_main &gt; .container .main_menu  .av-main-nav &gt; li &gt; a,\r\n\t\t.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }\r\n\t\t.responsive #top #wrap_all .av-logo-container {padding-left:10% !important; }\r\n\t\t.responsive #top #header_main &gt; .container .main_menu  .av-main-nav &gt; li &gt; a{\r\n\t\t\tmin-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;\r\n\t\t}\r\n\t\t.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}\r\n\t\t.responsive #top #header .av-main-nav &gt; li &gt; a, .responsive #top #header .av-main-nav &gt; li &gt; a:hover{\r\n\t\tbackground:transparent;\r\n\t\tcolor: inherit;\r\n\t\t}\r\n\t\t.html_cart_at_menu.html_header_sidebar #header_main .avia-menu {\r\n\t\t    margin-top: 0px;\r\n\t\t}\r\n\t\t.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {\r\n\t\t    display: none;\r\n\t\t}\r\n\t\t.html_header_sidebar #menu-item-shop.cart_dropdown {\r\n\t\t    right: 80px;\r\n\t\t    border: none;\r\n\t\t    margin-top: 15px;\r\n\t\t}\r\n\t\t.html_header_sidebar #header .container {\r\n\t\t    width: 85%;\r\n\t}\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-91-f9f3ab8b4e77f80e59dbd2b00c98d7ec hr-default  avia-builder-el-82  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-90-6eb629f8435dd3e5add4d36c633b8da0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger Icon<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-89-3315fae23eb97735e0f5d8b59181f0b3 av-minimal-toggle  avia-builder-el-84  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-224y71m-21dc366579d331665df7d3322f136596'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-88' data-fake-id='#toggle-id-88' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-88' data-slide-speed=\"200\" data-title=\"Icon Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Icon Color\" data-aria_expanded=\"Click to collapse: Icon Color\">Icon Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-88' aria-labelledby='toggle-toggle-id-88' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Icon Color:<\/strong>\u00a0To change the color of the burger menu go to <strong>Enfold &gt; Main Menu &gt; Burger\/Mobile Menu styling &gt; Menu Icon Color<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-m2j77u-42e5b8384db540f34ad1748b63d3311e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-89' data-fake-id='#toggle-id-89' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-89' data-slide-speed=\"200\" data-title=\"Icon Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Icon Size\" data-aria_expanded=\"Click to collapse: Icon Size\">Icon Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-89' aria-labelledby='toggle-toggle-id-89' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Icon Size :<\/strong>\u00a0To change the size of the mobile menu icon go to <strong>Enfold &gt; Main Menu &gt; Burger\/Mobile menu &gt; Menu Icon Style<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-16afrey-def84def0a1cd5baf01b412fcc9d8adf'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-90' data-fake-id='#toggle-id-90' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-90' data-slide-speed=\"200\" data-title=\"Burger Icon Background Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Burger Icon Background Color\" data-aria_expanded=\"Click to collapse: Burger Icon Background Color\">Burger Icon Background Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-90' aria-labelledby='toggle-toggle-id-90' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add a background color to the burger icon please use the below CSS<\/p>\n<pre><code> \r\n\/* Burger icon background  *\/\r\n.av-burger-menu-main.menu-item-avia-special .av-hamburger {\r\n\tbackground: gold;\r\n\tpadding: 0 25px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-v3q5u2-bc87ebbfce3531cd692c3785d02750ac'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-91' data-fake-id='#toggle-id-91' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-91' data-slide-speed=\"200\" data-title=\"Hover State\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover State\" data-aria_expanded=\"Click to collapse: Hover State\">Hover State<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-91' aria-labelledby='toggle-toggle-id-91' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the color of the burger menu on mouse hover please add the below CSS to your site.<\/p>\n<pre><code>\r\n\/* Burger menu hover color possible only for desktop*\/\r\n\r\n.av-burger-menu-main a .av-hamburger-inner,\r\n.av-burger-menu-main a .av-hamburger-inner:before,\r\n.av-burger-menu-main a .av-hamburger-inner:after {    \r\n    background-color: #222;\r\n}\r\n\r\n.av-burger-menu-main a:hover .av-hamburger-inner,\r\n.av-burger-menu-main a:hover .av-hamburger-inner:before,\r\n.av-burger-menu-main a:hover .av-hamburger-inner:after {    \r\n    animation: bgcolor .35s forwards;\r\n}\r\n\r\n\r\n@keyframes bgcolor {\r\n  0% { background: #222; }\r\n  100% { background: red; }\r\n}\r\n\r\n@keyframes textcolor {\r\n  0% { color: #222}\r\n  100% { color: red; }\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-wd5jai-c191418d9ccfb5cc5267db2584a8407e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-92' data-fake-id='#toggle-id-92' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-92' data-slide-speed=\"200\" data-title=\"Active State\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active State\" data-aria_expanded=\"Click to collapse: Active State\">Active State<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-92' aria-labelledby='toggle-toggle-id-92' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the burger menu icon color when a user clicks on it and is active please use the below CSS.<\/p>\n<pre><code> \r\n\r\n\/* Burger menu active state *\/\r\n#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner,\r\n#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner:before,\r\n#header .av-burger-menu-main a .av-hamburger.is-active .av-hamburger-inner:after {    \r\n    background-color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-11j5coa-b37e72cd100e93af97e57b5f4c333223'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-93' data-fake-id='#toggle-id-93' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-93' data-slide-speed=\"200\" data-title=\"Add word menu next to hamburger icon\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add word menu next to hamburger icon\" data-aria_expanded=\"Click to collapse: Add word menu next to hamburger icon\">Add word menu next to hamburger icon<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-93' aria-labelledby='toggle-toggle-id-93' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To display a word menu next to hamburger menu icon please use the CSS below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5954\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/word-menu.png\" alt=\"\" width=\"480\" height=\"96\" \/><\/p>\n<pre><code>\r\n\/*------------------------*\/\r\n\/* Add word menu next to hamburger icon\r\n\/*------------------------*\/\r\n.av-hamburger strong {\r\n    display: block!important;\r\n    position: absolute;\r\n    left: -90%;\r\n    top: 0;\r\n    font-size: 20px;\r\n    transform: translate(-90%, -44%);\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ma5jre-de119307132f68dfaa7db57b6f449f91'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-94' data-fake-id='#toggle-id-94' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-94' data-slide-speed=\"200\" data-title=\"Burger Icon with custom text\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Burger Icon with custom text\" data-aria_expanded=\"Click to collapse: Burger Icon with custom text\">Burger Icon with custom text<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-94' aria-labelledby='toggle-toggle-id-94' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Replace burger menu icon with custom text<\/p>\n<pre><code>\r\n\r\n\/* Replace burger menu with custom text *\/\r\n\r\n.av-burger-menu-main a .av-hamburger-inner,\r\n.av-burger-menu-main a .av-hamburger-inner:before,\r\n.av-burger-menu-main a .av-hamburger-inner:after {      \r\n    height: 0px;\r\n}\r\n\r\n.av-burger-menu-main a::before {\r\n    content: \"Custom icon text\";\r\n    font-size: 24px;    \r\n    position: absolute;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    line-height: 1em;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-lhilka-9be540a84917831cc1068c19868d3304'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-95' data-fake-id='#toggle-id-95' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-95' data-slide-speed=\"200\" data-title=\"Burger menu custom icon\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Burger menu custom icon\" data-aria_expanded=\"Click to collapse: Burger menu custom icon\">Burger menu custom icon<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-95' aria-labelledby='toggle-toggle-id-95' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<pre><code> \r\n\/* Hide the default icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {    \r\n    display:none;\r\n}\r\n\r\n\/* Custom default icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger:before {      \r\n    content:\"\\e806\";\r\n\tfont-family: 'entypo-fontello';\t\r\n\tposition: absolute;\r\n\tfont-size:30px;\r\n}\r\n\r\n\/* Custom active icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger.is-active:before {   \r\ncontent:\"\\e807\" !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-25nh8x-3e2e557cb031f031432a5fbd4b4f3d0a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-96' data-fake-id='#toggle-id-96' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-96' data-slide-speed=\"200\" data-title=\"Replace burger menu with an image\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Replace burger menu with an image\" data-aria_expanded=\"Click to collapse: Replace burger menu with an image\">Replace burger menu with an image<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-96' aria-labelledby='toggle-toggle-id-96' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<pre><code> \r\n\/* Hide the default icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,\r\n#top #header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {    \r\n    display:none;\r\n}\r\n\r\n\/* Custom default icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger:before {      \r\n        content: url(http:\/\/domain.com\/your-image.png);\r\n\tfont-family: 'entypo-fontello';\t\r\n\tposition: absolute;\r\n\tfont-size:30px;\r\n}\r\n\r\n\/* Custom active icon *\/\r\n#top #header .av-burger-menu-main a .av-hamburger.is-active:before {   \r\ncontent:\"\\e807\" !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rhc8cq-6aff6175594df4d3a6aad5e7551bb670'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-97' data-fake-id='#toggle-id-97' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-97' data-slide-speed=\"200\" data-title=\"Replace burger icon with word &quot;menu&quot;.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Replace burger icon with word &quot;menu&quot;.\" data-aria_expanded=\"Click to collapse: Replace burger icon with word &quot;menu&quot;.\">Replace burger icon with word \"menu\".<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-97' aria-labelledby='toggle-toggle-id-97' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To replace the burger icon with the word menu please use the below CSS<\/p>\n<pre><code>\r\n#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner,\r\n#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:before,\r\n#header .av-burger-menu-main a .av-hamburger .av-hamburger-inner:after {   \r\n  display:none;\r\n}\r\n\r\n\/*------------------------*\/\r\n\/* Replace hamburger icon with the word menu\r\n\/*------------------------*\/\r\n.av-hamburger strong {\r\n    display: inline-block!important;\r\n    position: absolute;\r\n    left: 100%;\r\n    top: 0;\r\n    font-size: 20px;\r\n    transform: translate(-50%, -50%);\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ugi98q-4d0d38b816c4bd16083ae6d7774bd428'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-98' data-fake-id='#toggle-id-98' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-98' data-slide-speed=\"200\" data-title=\"Hide Burger Icon and display text menu on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hide Burger Icon and display text menu on mobile\" data-aria_expanded=\"Click to collapse: Hide Burger Icon and display text menu on mobile\">Hide Burger Icon and display text menu on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-98' aria-labelledby='toggle-toggle-id-98' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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<\/p>\n<pre><code>\r\n\/* hide mobile menu icon and display text menu *\/\r\n\r\n@media only screen and (max-width: 767px) {\r\n\r\n  #top #header .av-burger-menu-main {\r\n  \tdisplay:none;\r\n  }\r\n  \r\n  .responsive #top .av-main-nav .menu-item {\r\n  \tdisplay:block !important;\r\n  }\r\n\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2s7hje-9803132fd01b69ec39a4aa107513e178'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-99' data-fake-id='#toggle-id-99' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-99' data-slide-speed=\"200\" data-title=\"Fixed Burger menu icon \" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Fixed Burger menu icon \" data-aria_expanded=\"Click to collapse: Fixed Burger menu icon \">Fixed Burger menu icon <span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-99' aria-labelledby='toggle-toggle-id-99' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make the burger menu icon display in a fixed position when the page is scrolled please use the below CSS<\/p>\n<pre><code>\/* Burger icon background  *\/\r\n.av-burger-menu-main.menu-item-avia-special .av-hamburger {\r\n\tbackground: gold!important;\r\n\tpadding: 25px;\r\n\tposition: fixed;\r\n\tright: 0px;\r\n\ttop:0;\r\n}\r\n\r\n\/* Icon Position *\/\r\n.av-hamburger span {\r\n\ttop: 13px;\r\n}\r\n\r\n#header.header-scrolled .av-hamburger span {\r\n\ttop:0;\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-88-2c5005aab5021394c71f3d3e742cb102 hr-default  avia-builder-el-85  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-87-68bad60b892d6c55f0054568dcb81d91 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger icon on a transparent header<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-86-2bbaef386a220ce6d67f163cfdf3eed5 av-minimal-toggle  avia-builder-el-87  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-rejht6-9fbc8f02410c0eda5ea696476390b290'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-100' data-fake-id='#toggle-id-100' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-100' data-slide-speed=\"200\" data-title=\"Icon Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Icon Color\" data-aria_expanded=\"Click to collapse: Icon Color\">Icon Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-100' aria-labelledby='toggle-toggle-id-100' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Icon Color:<\/strong>\u00a0To change the color of the burger menu icon on a transparent header go to <strong>Enfold &gt; Header &gt; Transparency Options &gt; Transparency menu color<\/strong><\/p>\n<p>To change the icon color using CSS please use the below code:<\/p>\n<pre><code>\r\n\/* Burger menu icon color on transparent header *\/\r\n\r\n#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner,\r\n#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:before,\r\n#header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:after {    \r\n    background-color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-85-8926eb1a3041407644c2e28d83c1a06a hr-default  avia-builder-el-88  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-84-e1e03c4b48bfa53c069737ccad758bdd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger\/Mobile menu links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-83-d3cd63adb3022c602d62b827e7e92913 av-minimal-toggle  avia-builder-el-90  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1n7x7e2-a9f74b806423a857838b657c3d2e8b31'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-101' data-fake-id='#toggle-id-101' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-101' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-101' aria-labelledby='toggle-toggle-id-101' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>A few options to change the burger menu link color:<\/p>\n<ol>\n<li><strong>Enfold options &gt; General styling &gt; Logo area &gt; Logo Area font color<\/strong><\/li>\n<li><strong>Enfold options &gt; Advanced styling &gt; Menu Links in overlay\/slide out &gt; Font Color<\/strong><\/li>\n<li>To make changes using CSS please use the below code:\n<pre><code>\r\n\r\n\/* Burger menu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {\r\n    color:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1cb19ai-4e45d0f1525e05a4151cfefc82994a49'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-102' data-fake-id='#toggle-id-102' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-102' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-102' aria-labelledby='toggle-toggle-id-102' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the font family of the main menu items go to <strong>Enfold &gt; Advanced Styling &gt; Menu Links in overlay\/slide out &gt; Font Family<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Burger menu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {\r\n    font-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-63ir62-fcc3cfafc1d22686c6af1f9042174995'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-103' data-fake-id='#toggle-id-103' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-103' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-103' aria-labelledby='toggle-toggle-id-103' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Separator Color<\/strong>: Separator color can be changed from\u00a0<strong>Enfold &gt; Advanced Styling &gt; Menu Links in overlay\/slide out &gt; Border Color<\/strong><\/p>\n<p><strong>Remove\u00a0Separator<\/strong>: the separators copy and paste the word &#8220;<strong>transparent<\/strong>&#8221; in the color\u00a0value field.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-11174 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897.png\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897.png 761w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-300x35.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-705x82.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/topbar-menu-border-e1538135144897-600x70.png 600w\" alt=\"\" width=\"761\" height=\"89\" \/><\/p>\n<p>To add custom menu separator to the enfold menu please disable the default separator from <strong>Enfold &gt; Main Menu &gt; General &gt; Separator <\/strong>between menu items and add the below custom CSS to your site.<\/p>\n<pre><code>\r\n\/*------------------------*\/\r\n\/*   Remove separator\r\n\/*------------------------*\/\r\n.responsive #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a {\r\n    border: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1d1ere2-84691fddc660de8ed1cd5be7842317cc'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-104' data-fake-id='#toggle-id-104' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-104' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-104' aria-labelledby='toggle-toggle-id-104' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the hover background for menu items go to <strong>Enfold &gt; Advanced Styling &gt; Menu Links in overlay\/slide out &gt;\u00a0Menu Hover BG<\/strong><\/p>\n<p>To change the menu link color on hover please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Overlay menu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a:hover {\r\n    color:green;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-kzyb7u-caa8bc39558e58050e0b8e50afc3e7e1'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-105' data-fake-id='#toggle-id-105' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-105' data-slide-speed=\"200\" data-title=\"Active state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Active state\" data-aria_expanded=\"Click to collapse: Active state\">Active state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-105' aria-labelledby='toggle-toggle-id-105' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add custom style to the current page or the active menu link please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Active menu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a {\r\n    color:green;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-251m7l-d96b235d13179399d2cd9191f3e30647'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-106' data-fake-id='#toggle-id-106' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-106' data-slide-speed=\"200\" data-title=\"Show\/Hide menu items on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Show\/Hide menu items on mobile\" data-aria_expanded=\"Click to collapse: Show\/Hide menu items on mobile\">Show\/Hide menu items on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-106' aria-labelledby='toggle-toggle-id-106' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To hide certain menu items on mobile, please go to Appearance &gt; Menu and then check \u201cScreen options\u201d on the top right side and then check \u201cCSS Classes\u201d. After that, a new field will appear under your menu items. Now you can simply edit your menu items and give \u201conly-desktop\u201d custom class to\u00a0the menu items that you would like to hide on mobile.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5952\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css.png\" alt=\"\" width=\"923\" height=\"800\" \/><\/p>\n<p>Please add following code to Quick CSS in Enfold theme options under General Styling tab to hide your selected menu items on mobile<\/p>\n<pre><code>@media only screen and (max-width: 990px) {\r\n.only-desktop { display: none !important; }}<\/code><\/pre>\n<p>and to display certain menu items on mobile, please give them custom CSS class \u201conly-mobile\u201d and change your code to following one<\/p>\n<pre><code>@media only screen and (min-width: 990px) {\r\n.only-mobile { display: none !important; }}\r\n<\/code><\/pre>\n<p><strong>Note:<\/strong>\u00a0Please choose custom CSS classes that do\u00a0<strong>not<\/strong>\u00a0start with \u201cmenu-item\u201d. These classes are not rendered to avoid conflict with main menu.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-9yphd-7b63cc6e7bd0f73594840c3ce06c33eb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-107' data-fake-id='#toggle-id-107' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-107' data-slide-speed=\"200\" data-title=\"Overlay menu align to top\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Overlay menu align to top\" data-aria_expanded=\"Click to collapse: Overlay menu align to top\">Overlay menu align to top<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-107' aria-labelledby='toggle-toggle-id-107' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To align the menu items inside the overlay at the top position, please use the below CSS<\/p>\n<pre><code>\r\n\/* Align to top *\/\r\n#top #av-burger-menu-ul {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-8zcc1-a1a76235bd2142159a74489e2d5dda4b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-108' data-fake-id='#toggle-id-108' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-108' data-slide-speed=\"200\" data-title=\"Align menu items to left\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Align menu items to left\" data-aria_expanded=\"Click to collapse: Align menu items to left\">Align menu items to left<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-108' aria-labelledby='toggle-toggle-id-108' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>For Full Page Overlay Menu<\/p>\n<pre><code>.av-burger-overlay-inner {\r\n    text-align: left;\r\n    padding-left: 20px;\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-82-d12256b82c3f31f3e82fe24d632f7ad8 hr-default  avia-builder-el-91  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-81-ae160f2e2d9f8cfbaa0ad36313486c30 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger\/Mobile submenu links<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-80-b48a253c6ee60679027227d6c154d280 av-minimal-toggle  avia-builder-el-93  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1gutlt6-3363c0af9ed0050977362e215f23fd6a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-109' data-fake-id='#toggle-id-109' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-109' data-slide-speed=\"200\" data-title=\"Display options\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Display options\" data-aria_expanded=\"Click to collapse: Display options\">Display options<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-109' aria-labelledby='toggle-toggle-id-109' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><h5>Submenu display settings<\/h5>\n<p>To change the submenu display settings go to\u00a0<strong>Enfold &gt; Main Menu &gt; Burger\/Mobile menu &gt; Menu Icon Submenu items<\/strong>\u00a0here you can choose to:<\/p>\n<ul>\n<li>Display submenu Always<\/li>\n<li>Display submenu on click<\/li>\n<li>Display submenu on hover<\/li>\n<\/ul>\n<p>To clone the\u00a0<strong>Active submenu link<\/strong>\u00a0got to\u00a0<strong>Enfold &gt; Main Menu &gt; Burger\/Mobile menu &gt; Clone title menu items to submenu<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1dg20ve-03bd30b022d3bd5022ab8966c268c221'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-110' data-fake-id='#toggle-id-110' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-110' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-110' aria-labelledby='toggle-toggle-id-110' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Submenu links inherit the same color as the main menu set in <strong>Enfold options &gt; Advanced styling &gt; Menu Links in overlay\/slide out &gt; Font Color<\/strong><\/p>\n<p>To add custom color only to the submenu items please use the below code.<\/p>\n<pre><code> \r\n\/* Submenu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a {\r\n    color: #456DEF;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-ofm1ka-c2762a6cd2f52d7bc69b15bc4152931b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-111' data-fake-id='#toggle-id-111' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-111' data-slide-speed=\"200\" data-title=\"Font Style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font Style\" data-aria_expanded=\"Click to collapse: Font Style\">Font Style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-111' aria-labelledby='toggle-toggle-id-111' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Submenu links inherit the font family set in\u00a0<strong>Enfold &gt; Advanced Styling &gt; Menu Links in overlay\/slide out &gt; Font Family<\/strong><\/p>\n<p>To make changes only to the submenu links font style please use the below CSS code:<\/p>\n<pre><code>\r\n\r\n\/* Burger menu links *\/\r\n\r\n#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a  {<\/code> <code>\u00a0   font-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;<\/code> <code>} <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-79-5a27340fccd0fa82bc473d672154a939 hr-default  avia-builder-el-94  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-78-703901ee82f31ba399af122ce9cb557d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Burger\/Mobile menu overlay<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-77-153b1f3aa9303878988291751a9d77be av-minimal-toggle  avia-builder-el-96  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-2ci8zca-67b5666ffd94858e7fc307bbadfe10ed'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-112' data-fake-id='#toggle-id-112' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-112' data-slide-speed=\"200\" data-title=\"Slide Overlay\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Slide Overlay\" data-aria_expanded=\"Click to collapse: Slide Overlay\">Slide Overlay<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-112' aria-labelledby='toggle-toggle-id-112' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To activate the flyout menu overlay style go to <strong>Enfold &gt; Main Menu &gt; Burger\/Mobile Menu &gt; Menu Overlay Style &gt; Sidebar Flyout Menu<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-28me9ca-31d6ecb1e10afb61e0ca45983e88b995'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-113' data-fake-id='#toggle-id-113' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-113' data-slide-speed=\"200\" data-title=\"Fullscreen Overlay\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Fullscreen Overlay\" data-aria_expanded=\"Click to collapse: Fullscreen Overlay\">Fullscreen Overlay<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-113' aria-labelledby='toggle-toggle-id-113' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To activate the fullscreen overlay menu style go to <strong>Enfold &gt; Main Menu &gt; Burger\/Mobile Menu &gt; Menu Overlay Style &gt; Fullpage Overlay Menu<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-5e3jmy-c8c9ef4a84ff1cacef7d37be741ea973'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-114' data-fake-id='#toggle-id-114' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-114' data-slide-speed=\"200\" data-title=\"Overlay Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Overlay Color\" data-aria_expanded=\"Click to collapse: Overlay Color\">Overlay Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-114' aria-labelledby='toggle-toggle-id-114' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Overlay Color<\/strong>: To change the menu overlay color go to <strong>Enfold &gt; Advanced Styling &gt;\u00a0Menu Links in overlay\/slide out &gt; Overlay Color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Menu overlay *\/\r\n\r\n#top #header .av-burger-overlay-bg {\r\n    background: #2fc;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-16qgbl6-433b677bcae710d7b089ad9f7ed8517d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-115' data-fake-id='#toggle-id-115' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-115' data-slide-speed=\"200\" data-title=\"Overlay Opacity\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Overlay Opacity\" data-aria_expanded=\"Click to collapse: Overlay Opacity\">Overlay Opacity<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-115' aria-labelledby='toggle-toggle-id-115' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Overlay Opacity<\/strong>: To make changes to the overlay transparency please use the below CSS code:<\/p>\n<pre><code>\r\n\/* Menu overlay *\/\r\n\r\n#top #header .av-burger-overlay-bg {\r\n    opacity: .9;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-12sgft6-8e87abfb8080cb66a0a308ce41b54c5f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-116' data-fake-id='#toggle-id-116' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-116' data-slide-speed=\"200\" data-title=\"Overlay Width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Overlay Width\" data-aria_expanded=\"Click to collapse: Overlay Width\">Overlay Width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-116' aria-labelledby='toggle-toggle-id-116' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the overlay width pelase use the below CSS:<\/p>\n<pre><code> \r\n\r\n\/* Overlay Width *\/\r\n\r\n.responsive #top .av-burger-overlay-scroll {\r\n    width: 550px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-a97kh-8ad889d21d86b671adc76e15fd134816'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-117' data-fake-id='#toggle-id-117' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-117' data-slide-speed=\"200\" data-title=\"Fullscreen overlay background blur\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Fullscreen overlay background blur\" data-aria_expanded=\"Click to collapse: Fullscreen overlay background blur\">Fullscreen overlay background blur<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-117' aria-labelledby='toggle-toggle-id-117' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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<\/p>\n<pre><code>\r\n.blurMe{\r\n  -webkit-filter: blur(4px);\r\n          filter: blur(4px);\r\n}\r\n<\/code><\/pre>\n<p>and add the below function to your child theme functions.php file.<\/p>\n\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-76-2071fed5ad2350c3be5ab6935d74696f hr-default  avia-builder-el-98  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-75-0124b6a494c4dfa45c94b2e1a3a2e828 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Footer menu<\/h2>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-73-183e0adab4e1373a958bfc328850e93b hr-default  avia-builder-el-100  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-72-c1ce8f38a6ad5f94332533a1fe110009 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Socket menu<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-74-898f0366308abc683812a3f3041bafc1 av-minimal-toggle  avia-builder-el-102  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-2hmghwq-8d1a188ae3c2242fd2b3e717176f5413'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-118' data-fake-id='#toggle-id-118' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-118' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-118' aria-labelledby='toggle-toggle-id-118' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the footer menu\u00a0color go to\u00a0<strong>Enfold options &gt; General styling &gt; Socket &gt; Primary color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Footer menu links *\/\r\n\r\n#socket .sub_menu_socket li a {\r\n\tcolor: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1wxl2yy-d38e9dba97d160906887fc858325ed94'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-119' data-fake-id='#toggle-id-119' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-119' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-119' aria-labelledby='toggle-toggle-id-119' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the footer menu links using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Footer menu links *\/\r\n\r\n#socket .sub_menu_socket li a  {\r\n    font-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;\r\n} \r\n\r\n<\/code><\/pre>\n<p><strong>NOTE<\/strong>: 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 <strong>Enfold &gt; Import\/Export &gt; Custom Font Manager<\/strong> or use the @import rule on top of your child theme style.css file to import the new fonts using CSS.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1ic86ru-960cadc765627ca100d5472bd9d114b8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-120' data-fake-id='#toggle-id-120' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-120' data-slide-speed=\"200\" data-title=\"Background\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background\" data-aria_expanded=\"Click to collapse: Background\">Background<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-120' aria-labelledby='toggle-toggle-id-120' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Background color<\/strong>: To change the background color\u00a0of the Socket go to <strong>Enfold &gt; General Styling &gt; Socket &gt; Socket background color<\/strong><\/p>\n<p><strong>Background image<\/strong>: To set the background image of the Socket\u00a0go to <strong>Enfold &gt; General Styling &gt; Socket &gt; Background image<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Socket Background *\/\r\n\r\n#socket .container {\r\n    background: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-136zeyy-b2cb1679f3121ca4137cadcb70a06c7d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-121' data-fake-id='#toggle-id-121' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-121' data-slide-speed=\"200\" data-title=\"Separators\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Separators\" data-aria_expanded=\"Click to collapse: Separators\">Separators<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-121' aria-labelledby='toggle-toggle-id-121' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Remove Separator: <\/strong>To remove the footer menu separators use the below CSS in your site.<\/p>\n<pre><code>\r\n#top #socket .sub_menu_socket li {\r\n    border: none;\r\n}\r\n <\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-le4fey-38f3779b065108acb4081aee5f125e17'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-122' data-fake-id='#toggle-id-122' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-122' data-slide-speed=\"200\" data-title=\"Hover state\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover state\" data-aria_expanded=\"Click to collapse: Hover state\">Hover state<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-122' aria-labelledby='toggle-toggle-id-122' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the Socket menu hover\u00a0color\u00a0go to\u00a0<strong>Enfold options &gt; General styling &gt; Socket &gt; Highlight color<\/strong><\/p>\n<p>To make changes using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Socket menu links *\/\r\n\r\n#socket .sub_menu_socket li a:hover {\r\n\tcolor: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-r3tox6-e956a2fb60f1c2d78cc136d667fe84b7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-123' data-fake-id='#toggle-id-123' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-123' data-slide-speed=\"200\" data-title=\"Display Footer menu on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Display Footer menu on mobile\" data-aria_expanded=\"Click to collapse: Display Footer menu on mobile\">Display Footer menu on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-123' aria-labelledby='toggle-toggle-id-123' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<pre><code>\r\n\r\n\/* Display footer menu on mobile *\/\r\n@media only screen and (max-width: 767px){\r\n.responsive #socket .sub_menu_socket {\r\n    display: block !important;\r\n}}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-71-828925e0c766d4fdb83ae5eefe14bcaf hr-default  avia-builder-el-103  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-70-df6313e1adc1a94429d42df2c2991ff1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Sidebar menu<\/h2>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-69-23d00166e7d4b26e660f7b89df142c0a av-minimal-toggle  avia-builder-el-105  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1tjy82y-d8ea2a5ceafacf4b142d5973e2b6f2c8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-124' data-fake-id='#toggle-id-124' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-124' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-124' aria-labelledby='toggle-toggle-id-124' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the sidebar menu using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Sidebar menu links *\/\r\n\r\n.sidebar .menu a {\r\n\tcolor: red;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1cg1aru-0a389ca525b5696c9216e278fe54cfa4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-125' data-fake-id='#toggle-id-125' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-125' data-slide-speed=\"200\" data-title=\"Font style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style\" data-aria_expanded=\"Click to collapse: Font style\">Font style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-125' aria-labelledby='toggle-toggle-id-125' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the sidebar menu using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Sidebar menu links *\/\r\n\r\n.sidebar .menu a {\r\n\tfont-family: \"HelveticaNeue\" Helvetica, Arial, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-nych0q-dfb91c0efca71e7718e0dda81bff1379'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-126' data-fake-id='#toggle-id-126' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-126' data-slide-speed=\"200\" data-title=\"Hover State\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Hover State\" data-aria_expanded=\"Click to collapse: Hover State\">Hover State<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-126' aria-labelledby='toggle-toggle-id-126' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To make changes to the sidebar menu using CSS please use the below code:<\/p>\n<pre><code>\r\n\r\n\/* Sidebar menu links *\/\r\n\r\n.sidebar .menu li:hover a {\r\n\tcolor: green;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-68-21f83db555171dd22d5514038cf2ea51 hr-default  avia-builder-el-106  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-67-1b1aab7a6711ea7273887e4fbc8a8cfc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Post Navigation<\/h2>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-66-74af0a9d814a5b7af83f30e8cdd4e3d0 av-minimal-toggle  avia-builder-el-108  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-2n73kru-1654b8aeb7b097e3ce847fae74cd94e7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-127' data-fake-id='#toggle-id-127' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-127' data-slide-speed=\"200\" data-title=\"Enable\/Disable previous and next post navigation\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Enable\/Disable previous and next post navigation\" data-aria_expanded=\"Click to collapse: Enable\/Disable previous and next post navigation\">Enable\/Disable previous and next post navigation<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-127' aria-labelledby='toggle-toggle-id-127' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The post navigation can be enabled or disable from <strong>Enfold &gt; Blog Layout &gt;\u00a0Disable the post navigation<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1cjsbvu-a4b425a61c7bf815e1721e7ba66eaedc'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-128' data-fake-id='#toggle-id-128' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-128' data-slide-speed=\"200\" data-title=\"Remove post nav image\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove post nav image\" data-aria_expanded=\"Click to collapse: Remove post nav image\">Remove post nav image<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-128' aria-labelledby='toggle-toggle-id-128' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the post navigation image please use the below CSS<\/p>\n<pre><code> \r\n\r\n\/* Remove post nav image *\/\r\n\r\n#top .avia-post-nav .entry-image {\r\n    display: none;\r\n}\r\n\r\n#top .avia-post-nav .entry-info,\r\n#top .avia-post-nav .entry-title {\r\n    width: auto;\r\n    min-width: 100px;\r\n}\r\n\r\n#top .avia-post-next {\r\n    text-align: left;\r\n}\r\n\r\n\r\n#top .avia-post-prev {\r\n    text-align: right;\r\n}\r\n\r\n#top .avia-post-nav:hover .entry-info-wrap {\r\n    width: 150px;\r\n}\r\n\r\n#top .avia-post-nav:hover {\r\n    height: auto !important;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-t2bey2-a02a12816e0778f1bf233ab34fba67a7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-129' data-fake-id='#toggle-id-129' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-129' data-slide-speed=\"200\" data-title=\"Arrow, Text and Background Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Arrow, Text and Background Color\" data-aria_expanded=\"Click to collapse: Arrow, Text and Background Color\">Arrow, Text and Background Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-129' aria-labelledby='toggle-toggle-id-129' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the arrow text and background color please use the below CSS<\/p>\n<pre><code> \r\n\/* Post nav color *\/\r\n#top .avia-post-nav {\r\n    color: #333;\r\n    background: rgba(235,230,230,0.4);\r\n}\r\n\r\n\/* Post nav color on hover *\/\r\n#top .avia-post-nav:hover {\r\n    color: #FFF;\r\n    background: rgba(2550,0,0,0.8);\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-19z34zu-ab44752419a84de198e8ca163ad19c52'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-130' data-fake-id='#toggle-id-130' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-130' data-slide-speed=\"200\" data-title=\"Show post from same category\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Show post from same category\" data-aria_expanded=\"Click to collapse: Show post from same category\">Show post from same category<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-130' aria-labelledby='toggle-toggle-id-130' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>When a user clicks on the post navigation display posts from the same category by adding the below code to your functions.php file<\/p>\n\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-7aqtoq-9159b20b562c4e6a0fe93f3a0c79b5ab'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-131' data-fake-id='#toggle-id-131' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-131' data-slide-speed=\"200\" data-title=\"Remove Post Navigation for specific post type\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove Post Navigation for specific post type\" data-aria_expanded=\"Click to collapse: Remove Post Navigation for specific post type\">Remove Post Navigation for specific post type<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-131' aria-labelledby='toggle-toggle-id-131' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You can remove the post navigation from a specific post type by adding this function to your functions.php:<\/p>\n\n<p>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.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-65-e6fcbe1275abc00dad7c0ffddb4b5e58 hr-default  avia-builder-el-111  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-64-b5082df2e95e8ff36cff7c2839c2c8ca '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Scroll to top<\/h2>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-63-ac3a7a8625ed64707b18e517018ced5d av-minimal-toggle  avia-builder-el-113  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1lkx5ca-65d622c5fa9178c5df632ccb5322c40b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-132' data-fake-id='#toggle-id-132' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-132' data-slide-speed=\"200\" data-title=\"Remove Scroll to top on desktop\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove Scroll to top on desktop\" data-aria_expanded=\"Click to collapse: Remove Scroll to top on desktop\">Remove Scroll to top on desktop<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-132' aria-labelledby='toggle-toggle-id-132' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the scroll top button on desktop please use the below CSS<\/p>\n<pre><code>\r\n#scroll-top-link {display: none; }\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1wers96-763af13ef913a6d2a94ef83627fe5172'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-133' data-fake-id='#toggle-id-133' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-133' data-slide-speed=\"200\" data-title=\"Arrow Color and Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Arrow Color and Size\" data-aria_expanded=\"Click to collapse: Arrow Color and Size\">Arrow Color and Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-133' aria-labelledby='toggle-toggle-id-133' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the arrow color or size please use the below CSS<\/p>\n<pre><code>\r\n#scroll-top-link:before {\r\n\tcolor: red;\r\n        font-size: 30px;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1gyxhvu-5e6644d848f075f0318b81f60868d491'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-134' data-fake-id='#toggle-id-134' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-134' data-slide-speed=\"200\" data-title=\"Background Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Background Color\" data-aria_expanded=\"Click to collapse: Background Color\">Background Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-134' aria-labelledby='toggle-toggle-id-134' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Change the background color using the below CSS<\/p>\n<pre><code>\r\n\/* Background *\/\r\n#scroll-top-link {\r\n    background-color: #1ec5bc;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-18756mi-e070c0c81cbebc42bd77f2060e00f450'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-135' data-fake-id='#toggle-id-135' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-135' data-slide-speed=\"200\" data-title=\"Shape\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shape\" data-aria_expanded=\"Click to collapse: Shape\">Shape<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-135' aria-labelledby='toggle-toggle-id-135' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the shape of the button to a circle please use the below CSS<\/p>\n<pre><code>\r\n#scroll-top-link {\r\n    border-radius: 30px;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-19pdru2-2996cd55053f5742885d0d372d313f6e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-136' data-fake-id='#toggle-id-136' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-136' data-slide-speed=\"200\" data-title=\"Position\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Position\" data-aria_expanded=\"Click to collapse: Position\">Position<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-136' aria-labelledby='toggle-toggle-id-136' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the box size and position please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Box size and position *\/\r\n#scroll-top-link{\r\n\twidth:25px;\r\n\theight:25px;\r\n\tright: 10px;\r\n\tbottom: 10px;\r\n}\r\n\r\n\/* Arrow position *\/\r\n#scroll-top-link:before{\r\n\ttop:-13px;\r\n\tright:8px;\r\n\tposition:absolute;\r\n} \r\n\r\n<\/code><\/pre>\n<p>Move scroll top button to the left side<\/p>\n<pre><code>\r\n#scroll-top-link { right: auto; left: 50px; }\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-r0b8ga-7b99b2a2d788fbb897901d89cbedffb4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-137' data-fake-id='#toggle-id-137' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-137' data-slide-speed=\"200\" data-title=\"Enable Scroll to top on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Enable Scroll to top on mobile\" data-aria_expanded=\"Click to collapse: Enable Scroll to top on mobile\">Enable Scroll to top on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-137' aria-labelledby='toggle-toggle-id-137' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Display scroll top button on mobile device<\/p>\n<pre><code>\r\n\r\n@media only screen and (max-width: 767px) {\r\n.responsive #scroll-top-link {\r\n  display: block !important;\r\n}}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-62-5847dfe7eec950367babea1c89b9033e hr-default  avia-builder-el-114  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-61-1fa39c70e1cc81d72e3926c42a9f5d1f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Mega menu<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-58-fc3ca0a831b7f31aa8ee7560fcf1f5cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Take me to the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/mega-menu\/\" target=\"_blank\" rel=\"noopener\">Mega menu documentation<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-59-4eb884a7148a268d4c03a399d423de21 hr-default  avia-builder-el-117  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-57-8256aea691138e399eeee8f328242777 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Fullwidth submenu<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-55-367198781c101a88057ec563a5fd6a4f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Take me to the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/\" target=\"_blank\" rel=\"noopener\">Fullwidth submenu documentation<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-56-af214a0458538fd5f3483d2296ebe060 hr-default  avia-builder-el-120  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-54-efa0af049743a9cbb464a76d4541d1af '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Custom menu styles<\/h2>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-53-e02ff2c5f4b1242ea06fca282e01ac12 hr-default  avia-builder-el-122  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-52-03d95238f8a522bc04864d44200dedea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>One Page menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-50-f8fbe112529645f6f1fe3c89e0ca0506 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Menu items can be linked to different sections of the same page by using Anchors or ID&#8217;s. For example, the One Page Enfold demos such as:<\/p>\n<ul>\n<li><a href=\"https:\/\/kriesi.at\/themes\/enfold-consulting\/\" target=\"_blank\" rel=\"noopener\">Consulting Demo<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/themes\/enfold-creative-studio\" target=\"_blank\" rel=\"noopener\">Creative Studio<\/a><\/li>\n<li><a href=\"https:\/\/kriesi.at\/themes\/enfold-gaming\/\" target=\"_blank\" rel=\"noopener\">Enfold Gaming<\/a><\/li>\n<\/ul>\n<p>In the below example let&#8217;s take a look at re-creating the consulting demo sections and menu.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-60-f2ba7a9b3bbe539516180bfd936170c7 av-minimal-toggle  avia-builder-el-125  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1qn82ru-65d747448f3543563ed0a2700506d08b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-138' data-fake-id='#toggle-id-138' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-138' data-slide-speed=\"200\" data-title=\"Step 1: Create different sections with anchor ID\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Create different sections with anchor ID\" data-aria_expanded=\"Click to collapse: Step 1: Create different sections with anchor ID\">Step 1: Create different sections with anchor ID<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-138' aria-labelledby='toggle-toggle-id-138' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Open an empty page and add a\u00a0color section element for each of the section you want to create. In our case we need to add 4 different color\u00a0section elements to create:<\/p>\n<ul id=\"avia-menu\" class=\"menu av-main-nav\">\n<li id=\"menu-item-127\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-1\"><span class=\"avia-menu-text\">Welcome<\/span><\/li>\n<li id=\"menu-item-129\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-mega-parent menu-item-top-level menu-item-top-level-2\"><span class=\"avia-menu-text\">Service<\/span><\/li>\n<li id=\"menu-item-128\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-3\"><span class=\"avia-menu-text\">About<\/span><\/li>\n<li id=\"menu-item-130\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-4 current-menu-item\"><span class=\"avia-menu-text\">Contact<\/span><\/li>\n<\/ul>\n<p>Add a unique Section ID to each section. In the below screenshot, notice we add an anchor ID called &#8220;welcome&#8221; 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.<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13448\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID.png\" alt=\"\" width=\"1791\" height=\"1293\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID.png 1791w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-300x217.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-1030x744.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-768x554.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-1536x1109.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-1500x1083.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-705x509.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Color-Section-Custom-ID-600x433.png 600w\" sizes=\"auto, (max-width: 1791px) 100vw, 1791px\" \/><\/a><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-33eyyp-d2d083edf8d4466a9e29032591349b50'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-139' data-fake-id='#toggle-id-139' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-139' data-slide-speed=\"200\" data-title=\"Step 2: Create a menu with anchor links\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Create a menu with anchor links\" data-aria_expanded=\"Click to collapse: Step 2: Create a menu with anchor links\">Step 2: Create a menu with anchor links<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-139' aria-labelledby='toggle-toggle-id-139' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To create a menu that scrolls to different sections when a user clicks on it go to WordPress Dashboard &gt; Appearance &gt; Menu &gt; Create a new menu<\/p>\n<p>Give your menu a name and start adding custom links by clicking on the custom links options.<\/p>\n<p>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:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11367\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/custom-link.png\" alt=\"\" width=\"295\" height=\"351\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/custom-link.png 295w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/custom-link-252x300.png 252w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/p>\n<p>To<strong> Link a section on an external site or a different page<\/strong>, we need to use the full path. For example, To link the\u00a0<a href=\"https:\/\/kriesi.at\/themes\/enfold\/homepage\/home-v7-one-page-portfolio\/#about-us\" target=\"_blank\" rel=\"noopener\">about us<\/a>\u00a0section on the One Page Demo we need to use the full path and the Anchor ID<\/p>\n<p>Example of full URL path:<\/p>\n<p><code>https:\/\/kriesi.at\/themes\/enfold\/homepage\/home-v7-one-page-portfolio\/#about-us<\/code><\/p>\n<p><strong>Note:<\/strong> Section ID&#8217;s turn into lowercase upon saving so please use lowercase for anchor links<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-p8ufd6-86ba3f3ba9ae23d802d705b2d14d66f2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-140' data-fake-id='#toggle-id-140' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-140' data-slide-speed=\"200\" data-title=\"Step 3: Putting it all together\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Putting it all together\" data-aria_expanded=\"Click to collapse: Step 3: Putting it all together\">Step 3: Putting it all together<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-140' aria-labelledby='toggle-toggle-id-140' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Default menu<\/strong>: If your website has only one page you can simply choose the one-page menu as the main menu from WordPress &gt; Appearance &gt; Menu &gt; One-Page Menu.<\/p>\n<p><strong>Fullwidth submenu<\/strong>: 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.<\/p>\n<p>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.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-51-8f28cc64c83a119b27652f5d3278aee4 hr-default  avia-builder-el-126  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-49-fa09b0b429eb863b06b77d196430af94 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Dots Menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-46-98fc769d04f2097b718de81b2f9a99e7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>In this tutorial, let&#8217;s take a look at modifying a &#8220;<strong>Fullwidth submenu element<\/strong>&#8221;\u00a0 to look and function like a one-page dots menu.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-45-715a079ef09c8c36f5daa88d1a7a8894 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Before we start, create a <a href=\"#one-page-menu\" target=\"_blank\" rel=\"noopener\">one-page menu using a Fullwidth submenu element.<\/a><\/p>\n<p>Enable custom CSS class name support from Enfold &gt; Layout Builder &gt; Developer options and give the Fullwidth Submenu a CSS class name &#8220;dots-menu&#8221;. After completing the steps we should have a dots menu that looks similar to the below screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11481\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1.png\" alt=\"\" width=\"1029\" height=\"606\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1.png 1029w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1-300x177.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1-768x452.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1-705x415.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/dots-menu-1-600x353.png 600w\" sizes=\"auto, (max-width: 1029px) 100vw, 1029px\" \/><\/p>\n<p>Copy the below CSS code to your child theme style.css<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-48-dfeb453e10fab8595170fcdff7eac69b av-minimal-toggle  avia-builder-el-130  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-25ive2-6ba93a09a1f0c56b262ec752e6338b94'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-141' data-fake-id='#toggle-id-141' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-141' data-slide-speed=\"200\" data-title=\"Recommended Settings\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Recommended Settings\" data-aria_expanded=\"Click to collapse: Recommended Settings\">Recommended Settings<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-141' aria-labelledby='toggle-toggle-id-141' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Header: <\/strong>The main header is optional but if you like to hide the header go to\u00a0<strong>Page &gt; Layout &gt; Header visibility and transparency<\/strong><\/p>\n<p><strong>Sidebar<\/strong>: If you are using color section element to build different sections of the page it is recommended to dsable the page sidebar from <strong>Page &gt; Layout &gt;\u00a0Sidebar Settings<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-viwpre-8e66a2ffc7d5b2b093689078cbdafa22'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-142' data-fake-id='#toggle-id-142' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-142' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-142' aria-labelledby='toggle-toggle-id-142' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\/*------------------------*\/\r\n\/*       Dots menu\r\n\/*------------------------*\/\r\n\r\n.dots-menu + .sticky_placeholder {\r\n\tdisplay: none;\t\r\n\theight: 0px !important;\r\n}\r\n\r\n#top .dots-menu {\r\n  background: transparent;\r\n  position: fixed!important;\r\n  right: 10px;\r\n  top: 50%!important;\r\n  transform: translateY(-50%);\r\n  border: none!important;\r\n  max-width: 30px!important;\r\n}\r\n\r\n#top .dots-menu .av-subnav-menu &gt; li {    \r\n    display: inline!important;\r\n    margin: 10px !important;\r\n}\r\n\r\n#top .dots-menu .av-subnav-menu li a {\r\n  border: 1px solid grey;\r\n  max-width: 25px;\r\n  max-height:25px;\r\n  border-radius:25px;  \r\n  overflow:hidden;\r\n  padding: 0 !important;\r\n  border: none!important;\r\n  background: #f3f4f7;\r\n}\r\n\r\n#top .dots-menu .av-subnav-menu li a .avia-bullet {\r\n  display: none !important;\r\n}\r\n#top .dots-menu .av-subnav-menu li a .avia-menu-text { \r\nvisibility: hidden;\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n.responsive #top .dots-menu {\r\n  background: transparent;\r\n  position: fixed!important;\r\n  right: 0;\r\n  top: 50%!important;\r\n  transform: translateY(-50%);\r\n}}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<section  class='av_textblock_section av-3imjf6p-44-3c4b527b6a8b5f32449a90195a6337ba '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-47-c4744a5b954ff54a574d246d4a987409 hr-default  avia-builder-el-132  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-42-c863f474e16fa3d016cde2fc8d929026 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Justified menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-40-e5135104e64f49c446938a85421cd2a5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Menu items can be spread out to take up equal space over the entire column width as seen below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5944\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/justified-menu.png\" alt=\"\" width=\"1224\" height=\"238\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-39-8fccc80a0d42f86f0579d77291fdd94b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To achieve this menu layout we will use some custom CSS and specific header settings.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-43-7b7c1b3017cae36584e413754c9cd612 av-minimal-toggle  avia-builder-el-136  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-194d66i-3cc5e9e1edcf07d70864bb7c377c74fc'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-143' data-fake-id='#toggle-id-143' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-143' data-slide-speed=\"200\" data-title=\"Header Settings\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Settings\" data-aria_expanded=\"Click to collapse: Header Settings\">Header Settings<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-143' aria-labelledby='toggle-toggle-id-143' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Header settings:\u00a0<strong>Enfold &gt; Header Layout &gt; Logo center, menu below<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2bzyk1-a32e8e869f95f8bf044f961844cc64e1'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-144' data-fake-id='#toggle-id-144' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-144' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-144' aria-labelledby='toggle-toggle-id-144' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\/*------------------------*\/\r\n\/*     Equal space menu\r\n\/*------------------------*\/\r\n\r\n#header #header_main_alternate .container{\r\n    width: 100%!important;\r\n    max-width:1220px;\r\n    padding:0!important;\r\n    margin:0!important;\r\n    left:50%;\r\n    transform:translateX(-50%);\r\n}\r\n#avia-menu {\r\n  text-align: center!important;\r\n  display:flex!important;  \r\n}\r\n\r\n.av-main-nav &gt; li {       \r\n    flex-grow: 1;\r\n    justify-content: center;\r\n    width: auto!important;\r\n}\r\n\r\n.av-main-nav &gt; li &gt; a {\r\n    display: block; \r\n}\r\n\r\n.av-main-nav &gt; li:nth-child(even) {\r\n\tbackground: #cdcdcd;\r\n}\r\n\r\n.av-main-nav &gt; li:nth-child(odd) {\r\n\tbackground: #dcdcdc;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-41-dd3799ad6b5eb7808604589f5170944b hr-default  avia-builder-el-137  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-38-3a165d6033b30bc23b9eff24d9c5284b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Multiline menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-35-dbf87c62e3fc141829d57a01da4c8a66 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To convert your main menu to a multi-line menu please use the below CSS:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6169\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Two-line-menu.png\" alt=\"\" width=\"838\" height=\"151\" \/><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-37-2bb81813dde18e541cf7d332905953f5 av-minimal-toggle  avia-builder-el-140  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-tgue3u-67d5f98b66078dcb41e91ef1f6174eb5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-145' data-fake-id='#toggle-id-145' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-145' data-slide-speed=\"200\" data-title=\"Header Settings\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Settings\" data-aria_expanded=\"Click to collapse: Header Settings\">Header Settings<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-145' aria-labelledby='toggle-toggle-id-145' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Header settings:\u00a0<strong>Enfold &gt; Header Layout &gt; Logo left, menu right<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rf72kq-5f531f622e6cc06f84067e34f84704f4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-146' data-fake-id='#toggle-id-146' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-146' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-146' aria-labelledby='toggle-toggle-id-146' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n \/* Multi line menu *\/\r\n.main_menu {\r\n    max-width: 70%;\r\n    margin-top: 10px;\r\n}\r\n\r\nul.menu.av-main-nav {\r\n    display: flex!important;    \r\n    flex-direction: row;\r\n    flex-wrap: wrap;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n}\r\n\r\n.av-main-nav &gt; li &gt; a {\r\n    line-height: 35px!important;\r\n    height: 35px!important;\r\n  }\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-36-e3ae6050b403254ae717c05db1a214ee hr-default  avia-builder-el-141  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-34-823ab6cbb828cbfd7aa5394cf736914f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Logo Centered split menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-31-a39be28b2bf807d9479f74baf25963c6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To position, the logo right in the middle of the menu items as shown below<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5960\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/logo-center.png\" alt=\"\" width=\"1023\" height=\"122\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-30-bbc7bd813b9ae38f2b1f2ec9572d11d1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>In the below CSS code adjust the value of &#8220;<strong>X<\/strong>&#8221; to the number of menu item after which the logo should appear in the line <strong>#top #header .av-main-nav li:nth-child(X)<\/strong><\/li>\n<li>Adjust the margin right value for <code>\u00a0li:nth-child(x) <\/code> to be a little more than the width of the logo in the code<\/li>\n<li>Once the values are updated to suit your site design your CSS code is ready to use:<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-33-4724d237be06bc19ec5f3f8b4996fce9 av-minimal-toggle  avia-builder-el-145  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1cysgbu-f9d11c210df4f2d4bf308fd72b4d6bb5'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-147' data-fake-id='#toggle-id-147' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-147' data-slide-speed=\"200\" data-title=\"Header Settings\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Header Settings\" data-aria_expanded=\"Click to collapse: Header Settings\">Header Settings<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-147' aria-labelledby='toggle-toggle-id-147' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Header settings: <strong>Enfold &gt; Header &gt; Header Layout &gt; Menu and Logo Position<\/strong> and select <strong>Logo left, Menu right<\/strong>.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-o428fe-c097e11a9b6e0f4a64d7018311ac96f4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-148' data-fake-id='#toggle-id-148' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-148' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-148' aria-labelledby='toggle-toggle-id-148' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \/*------------------------*\/\r\n\/* CSS - Logo center split menu\r\n\/*------------------------*\/\r\n\r\n@media only screen and (min-width: 780px) {\r\n\/*In the below code nth-child(x) the value of x should be half the number of total menu items*\/\r\n#top #header .av-main-nav li:nth-child(3) {\r\n  \/* Adjust the width of the logo *\/\r\n    margin-right:150px;\r\n}\r\n\r\n#header .main_menu {\r\n    \/*background: gold;*\/\r\n    width: 100%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n}\r\n\r\n.av-main-nav-wrap {\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n}\r\n\r\n#header .logo {\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index:999;\r\n}\r\n\r\n#header .logo img {    \r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    max-width: 100px;  \r\n}\r\n}<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-32-6289067eefe6c89e7cd040a25be8cbbc hr-default  avia-builder-el-146  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-29-9a6eddc8188b2dd75f48f1c6d6b6d1eb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization Tutorials<\/h2>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-27-d310a52ae1a65399260b724925e26a2a hr-default  avia-builder-el-148  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-26-779937e90eb634efe03896970d906a0a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add a\u00a0custom class to your menu items<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-24-85bfb5051159d1139f6cd0d256cda9da '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By adding a custom CSS class name to the menu items we can target specific menu items to make changes.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-28-1e641f44c8902774d2a3d9ab5ece35c0 av-minimal-toggle  avia-builder-el-151  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-5tfckh-47c3da71d2773c4000276ddcd8aa7572'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-149' data-fake-id='#toggle-id-149' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-149' data-slide-speed=\"200\" data-title=\"Step 1: Access screen options.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Access screen options.\" data-aria_expanded=\"Click to collapse: Step 1: Access screen options.\">Step 1: Access screen options.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-149' aria-labelledby='toggle-toggle-id-149' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Go to Appearance &gt; Menu and then check \u201cScreen options\u201d on the top right side.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3qsnw1-2df772b01b2d4182d39d1f19c0d58c43'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-150' data-fake-id='#toggle-id-150' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-150' data-slide-speed=\"200\" data-title=\"Step 2: Select CSS Classes option\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Select CSS Classes option\" data-aria_expanded=\"Click to collapse: Step 2: Select CSS Classes option\">Step 2: Select CSS Classes option<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-150' aria-labelledby='toggle-toggle-id-150' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Here you will notice some advanced options, go ahead and select \u201cCSS Classes\u201d if it is not checked. If it&#8217;s already selected you do not have to do anything simply skip to the next step.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2ykptd-f598083e12eef0de51eff58ffd71accb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-151' data-fake-id='#toggle-id-151' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-151' data-slide-speed=\"200\" data-title=\"Step 2: Add a class name to your menu items\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add a class name to your menu items\" data-aria_expanded=\"Click to collapse: Step 2: Add a class name to your menu items\">Step 2: Add a class name to your menu items<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-151' aria-labelledby='toggle-toggle-id-151' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7399\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1.png\" alt=\"\" width=\"923\" height=\"800\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1.png 923w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1-300x260.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1-768x666.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1-705x611.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/custom-css-1-450x390.png 450w\" sizes=\"auto, (max-width: 923px) 100vw, 923px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-25-654b8264567596699c5c1840b284ddc1 hr-default  avia-builder-el-152  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-23-7ad8bb5adc928ae3d3dff180c7982789 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add icons to menu item<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-20-57bcc621648a60125456df4f28237274 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11486\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item.png\" alt=\"\" width=\"800\" height=\"57\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item.png 800w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item-300x21.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item-768x55.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item-705x50.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Add-icons-to-menu-item-600x43.png 600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-22-7807541438896f28c705ca08c131b9a5 av-minimal-toggle  avia-builder-el-155  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1wmt4x6-d40a41d2b149459168c8aa4f9ec6adf8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-152' data-fake-id='#toggle-id-152' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-152' data-slide-speed=\"200\" data-title=\"Create your main menu\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Create your main menu\" data-aria_expanded=\"Click to collapse: Create your main menu\">Create your main menu<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-152' aria-labelledby='toggle-toggle-id-152' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>If you do not have a menu assigned to your theme yet go\u00a0to\u00a0<strong>WordPress Dashboard &gt; Appearance &gt; Menu<\/strong>\u00a0and 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 <a href=\"#menu-setup\">Menu Setup<\/a> section.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1k7olm2-a1690f03d9e1c9e15075d86eedf2b709'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-153' data-fake-id='#toggle-id-153' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-153' data-slide-speed=\"200\" data-title=\"Enable debug mode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Enable debug mode\" data-aria_expanded=\"Click to collapse: Enable debug mode\">Enable debug mode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-153' aria-labelledby='toggle-toggle-id-153' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The Debug mode will allow you to copy the element shortcodes. Follow the steps to\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\">Enable debug mode<\/a>. So we can copy the icon shortcodes.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4xjp0q-1d153daefaa166feafc585df031d0788'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-154' data-fake-id='#toggle-id-154' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-154' data-slide-speed=\"200\" data-title=\"Copy the icon shortcodes\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Copy the icon shortcodes\" data-aria_expanded=\"Click to collapse: Copy the icon shortcodes\">Copy the icon shortcodes<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-154' aria-labelledby='toggle-toggle-id-154' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8139\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2.png\" alt=\"\" width=\"867\" height=\"722\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2.png 867w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2-300x250.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2-768x640.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2-705x587.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-2-600x500.png 600w\" sizes=\"auto, (max-width: 867px) 100vw, 867px\" \/><\/p>\n<p>Now, you should be able to see the icon shortcode in the debug area below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7227\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341.png\" alt=\"\" width=\"719\" height=\"107\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341.png 719w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341-300x45.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341-710x107.png 710w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341-705x105.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-Shortcode-e1526011344341-600x89.png 600w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-okfnka-c1db377695d73332fbd916cbfcca0cfe'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-155' data-fake-id='#toggle-id-155' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-155' data-slide-speed=\"200\" data-title=\"Add Icon Shortcode to menu items\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add Icon Shortcode to menu items\" data-aria_expanded=\"Click to collapse: Add Icon Shortcode to menu items\">Add Icon Shortcode to menu items<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-155' aria-labelledby='toggle-toggle-id-155' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To add the icons to menu item go to <strong>WordPress Dashboard &gt; Appearance &gt; Menu<\/strong> and paste the shortcode for each menu item in the Navigation Label field. It is same as the Link Text or the menu text.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7226\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/IconMenu.png\" alt=\"\" width=\"549\" height=\"710\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/IconMenu.png 549w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/IconMenu-232x300.png 232w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/IconMenu-545x705.png 545w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/IconMenu-450x582.png 450w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-21-01010942f54d96ec36d64dabc3d2c2c8 hr-default  avia-builder-el-156  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-19-db2c6899b0bc0490df61dbd583cfbc21 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Different menu for different pages<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-16-734dab571314895c51fde1314518b82b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In this tutorial, we will learn how to replace the default menu and display a different menu on specific pages.<\/p>\n<ol>\n<li>Create your additional menus from <strong>WordPress &gt; Appearance &gt; Menus<\/strong> and give each menu a unique name.<\/li>\n<li>Install the plugin <a href=\"https:\/\/wordpress.org\/plugins\/zen-menu-logic\/\" target=\"_blank\" rel=\"noopener\">Zen Menu Logic<\/a> from <strong>WordPress &gt; Plugins &gt; Add New<\/strong><\/li>\n<li>Select the menu location from <strong>WordPress &gt; Settings &gt; Zen Menu Logic\u00a0<\/strong><\/li>\n<\/ol>\n<p>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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11501\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Zen-Menu.png\" alt=\"\" width=\"319\" height=\"176\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Zen-Menu.png 319w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/Zen-Menu-300x166.png 300w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-15-8c8ee445aecc5a72a83c6593d5a2bf7c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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<\/p>\n<pre><code>add_filter( 'wp_nav_menu_args', 'my_custom_wp_nav_menu_args' );\r\n\r\nfunction my_custom_wp_nav_menu_args( $args = '' ) {\r\n\r\nif($args['theme_location'] === 'avia') \r\n     if( is_page( 12 ) ) { \r\n          $args['menu'] = 'Anchor Menu'; \r\n          } else { \r\n          $args['menu'] = 'Full Menu';\r\n          } \r\nreturn $args;\r\n}<\/code><\/pre>\n<p>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. &#8220;12&#8221; 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.<\/p>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-17-92cd61bd4cb408b47b55c748b47f20d2 hr-default  avia-builder-el-160  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-14-a67dc8b0c06cacebb79756fd03e0ee7c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display a different menu for logged in\/logged out users<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-12-b58fd1e9884003e497cd12496db4fa60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-8ubbe9-600b5cf4ed18408a5d285e7ab77fd332 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-p2otd-6f0bd6ba34de4a84032039db73fc4317 av-minimal-toggle  avia-builder-el-164  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-2ozuox-1caf3603e2e927c09e6f94b3351747ea'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-156' data-fake-id='#toggle-id-156' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-156' data-slide-speed=\"200\" data-title=\"Function\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Function\" data-aria_expanded=\"Click to collapse: Function\">Function<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-156' aria-labelledby='toggle-toggle-id-156' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\r\n\/*\r\n\r\nDisplay a different menu for registered users\r\n\r\n*\/\r\n\r\nadd_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );\r\n\r\nfunction my_wp_nav_menu_args( $args = '' ) {\r\n\r\nif($args['theme_location'] === 'avia') \r\n     if( is_user_logged_in() ) { \r\n          $args['menu'] = 'THE NAME OF YOUR LOGGED IN MENU HERE'; \r\n          } else { \r\n          $args['menu'] = 'THE NAME OF YOUR LOGGED OUT MENU HERE';\r\n          } \r\nreturn $args;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-13-ced2d6d0230f95c63219a6d575ca2181 hr-default  avia-builder-el-165  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-11-a29689b9b4c2130c051f57ad66b90edb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Hide top bar on mobile and display the top bar menu in burger menu.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-8-c81287d56b09965d976463395c0c8f8f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-p2otd-10-3906c20f9d7ee390ac6625021defcc39 av-minimal-toggle  avia-builder-el-168  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-6bo2jl-5b25e9435f09be39dac218de9616b66e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-157' data-fake-id='#toggle-id-157' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-157' data-slide-speed=\"200\" data-title=\"Step 1: Hide top bar on mobile.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Hide top bar on mobile.\" data-aria_expanded=\"Click to collapse: Step 1: Hide top bar on mobile.\">Step 1: Hide top bar on mobile.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-157' aria-labelledby='toggle-toggle-id-157' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add the below CSS to your site to hide the top bar menu on mobile.<\/p>\n<p>Note: To hide the top bar on tablets please\u00a0change the &#8220;max-width&#8221; value to 990px.<\/p>\n<pre><code>\r\n\/* Hide Topbar in mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n    #header_meta {\r\n        display:none;\r\n    }\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-429opt-f36dd599076941e67f06ed4d010a1e92'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-158' data-fake-id='#toggle-id-158' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-158' data-slide-speed=\"200\" data-title=\"Step 2: Create a new menu to display on mobile\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Create a new menu to display on mobile\" data-aria_expanded=\"Click to collapse: Step 2: Create a new menu to display on mobile\">Step 2: Create a new menu to display on mobile<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-158' aria-labelledby='toggle-toggle-id-158' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>On the mobile, we want to display the main menu items and the top bar menu items.<\/p>\n<p>Example:<\/p>\n<p>If your top bar has 3 menu items:<\/p>\n<ul>\n<li>FAQ<\/li>\n<li>Support<\/li>\n<li>Privacy Policy<\/li>\n<\/ul>\n<p>And the main menu has\u00a0the below items:<\/p>\n<ul>\n<li>Home<\/li>\n<li>About<\/li>\n<li>Service<\/li>\n<li>Contact<\/li>\n<\/ul>\n<p>Let&#8217;s combine both the menu items and create a new menu which we can display to the mobile menu.<\/p>\n<p>Go to Appearance &gt; Menu &gt; Create a new menu and give it a name &#8220;mobile menu&#8221; and add all of the above menu items.<\/p>\n<ul>\n<li>Home<\/li>\n<li>About<\/li>\n<li>Service<\/li>\n<li>Contact<\/li>\n<li>FAQ<\/li>\n<li>Support<\/li>\n<li>Privacy Policy<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-31j0z5-f32736ea38ccc0fe20cf3bd9ee2a4467'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-159' data-fake-id='#toggle-id-159' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-159' data-slide-speed=\"200\" data-title=\"Step 3: Assign the alternate menu to display on mobile or tablets\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Assign the alternate menu to display on mobile or tablets\" data-aria_expanded=\"Click to collapse: Step 3: Assign the alternate menu to display on mobile or tablets\">Step 3: Assign the alternate menu to display on mobile or tablets<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-159' aria-labelledby='toggle-toggle-id-159' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Lastly, Go to <strong>Enfold &gt; Main menu &gt; General &gt;\u00a0Alternate Menu for Mobile<\/strong> and select the &#8220;<strong>Mobile menu<\/strong>&#8221; we just created in the previous step to display on mobile or tablets \ud83d\ude42<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-31mvv5-3601ca122e0095d4c244d273ee84bc9a hr-default  avia-builder-el-169  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-lbntfq1g-115b823c8aebf50ce539d0af4ab510c5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>To enable burger menu on desktop and to have alternate menu on mobile<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-lbntjfhf-78edad3c3222a51df7484f6b31a9b372 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>You can go to Appearance &gt; Menus, click \u201cScreen options\u201d on the top right side and enable \u201cCSS Classes\u201d<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13467\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes.png\" alt=\"\" width=\"2399\" height=\"295\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes.png 2399w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-300x37.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-1030x127.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-768x94.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-1536x189.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-2048x252.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-1500x184.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-705x87.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/Menu-CSS-classes-600x74.png 600w\" sizes=\"auto, (max-width: 2399px) 100vw, 2399px\" \/><\/a><br \/>\nand then give your menu items custom CSS class \u201cdesktop-menu\u201d for menu items for your desktop menu and \u201cmobile-menu\u201d for items for mobile menu and add following code to Enfold theme options &gt; General Styling &gt; Quick CSS<\/p>\n<pre><code>\r\n@media only screen and (max-width: 767px) {\r\n.desktop-menu { display: none; }\r\n.mobile-menu { display: block; }\r\n}\r\n.mobile-menu { display: none; }\r\n<\/code><\/pre>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-9-e8d09c55e5caa0e18fa26adda9513740 hr-default  avia-builder-el-172  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-7-d978a2b0ac04d75c132f3cffd2312cd3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-1b5nn5-6-d96a119a1521189cb2c969fe43fa1557 hr-default  avia-builder-el-174  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-5-3d9dc9fcfb4033a90ed071384b5f7173 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Menu overlaps logo<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-3-d7db3c14f042b76b2fafa4dc47ab42f8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Depending on your menu item quantity and logo size, your menu items may start to overlap the logo as seen in the below screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7407\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue.png\" alt=\"\" width=\"1211\" height=\"94\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue.png 1211w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-300x23.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-768x60.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-1030x80.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-705x55.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-1210x94.png 1210w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/menu-logo-issue-450x35.png 450w\" sizes=\"auto, (max-width: 1211px) 100vw, 1211px\" \/><\/p>\n<p>There several ways we can resolve this issue, please try one of the following methods mentioned below:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jm1dtur4-18-ade7dcb002a4e5cc59348ae7850acde6 av-minimal-toggle  avia-builder-el-177  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-4cj3d6-94aed2a7462f0fca9a6a801ffe70432f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-160' data-fake-id='#toggle-id-160' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-160' data-slide-speed=\"200\" data-title=\"Switch to adaptive logo and menu position\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Switch to adaptive logo and menu position\" data-aria_expanded=\"Click to collapse: Switch to adaptive logo and menu position\">Switch to adaptive logo and menu position<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-160' aria-labelledby='toggle-toggle-id-160' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Adapt position to width<\/strong>: Place the logo and the menu on the left and right edge of the header so they adapt to the browser width.<\/p>\n<p>Go to\u00a0<strong>Enfold &gt; Header &gt; Header Behavior &gt; Let logo and menu position adapt to browser window<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-kzaqga-d8237c2612a45fe28350cefbfbc4e5a4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-161' data-fake-id='#toggle-id-161' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-161' data-slide-speed=\"200\" data-title=\"Switch to mobile menu on tablets or desktop\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Switch to mobile menu on tablets or desktop\" data-aria_expanded=\"Click to collapse: Switch to mobile menu on tablets or desktop\">Switch to mobile menu on tablets or desktop<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-161' aria-labelledby='toggle-toggle-id-161' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>If the menu runs in the logo on tablets only, please enable burger menu on tablets from\u00a0<strong>Enfold options &gt; Main Menu &gt; General &gt; Menu Items for mobile<\/strong>.<\/p>\n<p>To switch to a burger menu on desktop go to\u00a0<strong>Enfold options &gt; Main Menu &gt; General &gt; Menu Items for desktop &gt;\u00a0Display as Icon<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7410\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile.png\" alt=\"\" width=\"1145\" height=\"563\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile.png 1145w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile-300x148.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile-768x378.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile-1030x506.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile-705x347.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/tabsmobile-450x221.png 450w\" sizes=\"auto, (max-width: 1145px) 100vw, 1145px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1d80o7e-8889bbb30104c66437e60ddefd1edda1'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-162' data-fake-id='#toggle-id-162' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-162' data-slide-speed=\"200\" data-title=\"Reduce the space between the menu items.\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Reduce the space between the menu items.\" data-aria_expanded=\"Click to collapse: Reduce the space between the menu items.\">Reduce the space between the menu items.<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-162' aria-labelledby='toggle-toggle-id-162' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>In most cases, reducing the space between the menu items should help. Please use the CSS code below:<\/p>\n<pre><code>\r\n\/* Reduce the space between the menu items *\/\r\n@media only screen and (max-width: 1100px) { \r\n    .av-main-nav &gt; li &gt; a { padding: 0 7px; }\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-o0wmx6-4ea256b66e0e175840899c5b1d27ad47'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-163' data-fake-id='#toggle-id-163' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-163' data-slide-speed=\"200\" data-title=\"Activate burger menu at custom width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Activate burger menu at custom width\" data-aria_expanded=\"Click to collapse: Activate burger menu at custom width\">Activate burger menu at custom width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-163' aria-labelledby='toggle-toggle-id-163' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Activate the burger menu just before the menu starts to run into the logo by adjusting the max-width value in the code below:<\/p>\n<pre><code>\r\n\/* Activate burger menu *\/\r\n @media only screen and (max-width: 1224px) {\r\n#top #header .av-main-nav &gt; li.menu-item  {\r\n    display: none!important;\r\n}\r\n#top #header .av-burger-menu-main {\r\n    cursor: pointer;\r\n    display: block!important;\r\n}}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1b5nn5-4-7f51778893ca1fcafd16da90bf493467 hr-default  avia-builder-el-178  el_after_av_toggle_container  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3imjf6p-2-63656d6f315b0428364817e1c9108b5b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Enfold Menu Item Limit<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3imjf6p-1-dd8dea90ecad36e8e8137a0f9be41461 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>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.<\/p>\n<p>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:<\/p>\n<h4>Via .htaccess file:<\/h4>\n<p>Add the following line to your .htaccess file:<\/p>\n<pre>php_value max_input_vars 5000\r\n<\/pre>\n<h4>Via php.ini:<\/h4>\n<p>Search for the \u201cmax_input_vars\u201d setting in your php.ini file and change it to:<\/p>\n<pre>max_input_vars = 5000;\r\n<\/pre>\n<p>General rule of thumb is: the higher the number in the setting, the more menu items you can create.<\/p>\n<p>If neither of those 2 solutions\u00a0fixes the problem there are a few other things you can try,\u00a0<a href=\"http:\/\/sevenspark.com\/docs\/ubermenu-menu-item-limit\">which are mentioned here<\/a><\/p>\n<p><em><small>(Credit for the original article goes to\u00a0<a href=\"http:\/\/sevenspark.com\/docs\/ubermenu-menu-item-limit\">sevenspark.com<\/a>)<\/small><\/em><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-5873","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=5873"}],"version-history":[{"count":46,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5873\/revisions"}],"predecessor-version":[{"id":13465,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/5873\/revisions\/13465"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=5873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=5873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=5873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}