{"id":285,"date":"2017-02-19T04:18:09","date_gmt":"2017-02-19T04:18:09","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=285"},"modified":"2020-03-31T10:16:31","modified_gmt":"2020-03-31T10:16:31","slug":"fullwidth-sub-menu","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/","title":{"rendered":"Fullwidth Sub Menu"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-g8p0vp-6f022b9dfa1ca884b436434c328c696c\">\n.flex_column.av-g8p0vp-6f022b9dfa1ca884b436434c328c696c{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-g8p0vp-6f022b9dfa1ca884b436434c328c696c av_one_full  avia-builder-el-0  el_before_av_one_full  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-8suut-ed719282b7df55f2b2c314f72a86a7e0\">\n#top .av-special-heading.av-8suut-ed719282b7df55f2b2c314f72a86a7e0{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-8suut-ed719282b7df55f2b2c314f72a86a7e0 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-8suut-ed719282b7df55f2b2c314f72a86a7e0 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-8suut-ed719282b7df55f2b2c314f72a86a7e0 av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Fullwidth Sub Menu<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n<div  class='hr av-g07yml-37b7c4f67249072293f16a1f45d3dfe8 hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-fr9cfh-843e2a8e301ce37c06db3a504e0337e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview and Settings<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-fkitpx-159926fc69fe988d7de786977588d360 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Full-width\u00a0Submenu can be used to display additional menus on specific pages. Submenus can either scroll with the page or stays at the top until a new menu appears.<\/p>\n<p>A working example of the <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/sub-menus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Submenu element<\/a>.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-fhhn5x-ca453fe673668146b4c78208e78f38b9 hr-default  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-fc49qt-86ceaf4024e53d20645ba2fa43c36a63 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Fullwidth Sub Menu Settings<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-f6tu19-05b1ca0167856291e11da9dc4689482d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Submenu element settings will allow you to:<\/p>\n<ul>\n<li>Create or Select Menu<\/li>\n<li>Menu Alignment<\/li>\n<li>Colors Profile<\/li>\n<li>Sticky Submenu<\/li>\n<li>Mobile Behavior<\/li>\n<\/ul>\n<\/div><\/section><br \/>\n<div  class='hr av-f04oph-6f6ee5559ed59c04e106ce438dc12b7f hr-default  avia-builder-el-8  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-eqq6r1-be878209e8e3ae6163343ca4a4e721d8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section><br \/>\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><br \/>\n<div  class='hr av-egultp-ed3bc53c31d54d8f1ea56dd90bb32fd3 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><br \/>\n<section  class='av_textblock_section av-eabrcl-159af6fbf575d7feb6bca27faecb6e0a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section><br \/>\n<br \/>\n<div  class='hr av-di3nvh-9d3ece8e0b28f10336d621ca03ea48f3 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-dao0ud-f4a0ad72d91169ae5848055ffa2e2861 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-d3ikbp-6e7131600cca74a76f7fd1e7cbe56ea9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default the Submenu element picks up the styles set up in the theme options. To add additional styles and make custom changes the following code snippets can be used.<\/p>\n<\/div><\/section><br \/>\n<div  class='hr av-czx1il-d98233c5db068e34bd88b08a90796111 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-1a43c5-1bbb70c6f8076f521bee5148baaf5f00 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Links<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-cm6sb1-4f7660fd5e537ff5016e42dd4d6f6edd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To highlight a single menu item, use the button style option provided in the Submenu pop up options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4737\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Menu-Style.png\" alt=\"\" width=\"927\" height=\"103\" \/><\/p>\n<p>For the custom styling of a menu item, we can use custom CSS code. The code snippet below will style the last menu item added to the Submenu element and position it to the right. In the example below we have used a phone number as menu text:<\/p>\n<p><strong>Style &#8211; 1<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-1\" target=\"_blank\" rel=\"noopener\">submenu with a phone number<\/a>.<\/p>\n<\/div><\/section><\/p><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-9h529x-809524ca5db5765e9b44907998c91c9d\">\n.flex_column.av-9h529x-809524ca5db5765e9b44907998c91c9d{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-9h529x-809524ca5db5765e9b44907998c91c9d av_one_full first flex_column_div av-zero-column-padding  '     ><p><div  class='hr av-95aa2t-3078ece840ede0d7bd7a11a2cd545821 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-90hnkl-9b2f55131295396c968a8bd56cb480f9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom Background<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-8voatx-a17229a7a7fcc5d21913239faeaec6e0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The background color for the Submenu element is inherited by the color scheme set up in the theme options. In the example below, we will look at adding a custom background color to the Submenu element to change the default style.<\/p>\n<p><strong>Style-2<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-2\" target=\"_blank\" rel=\"noopener\">submenu with a custom background<\/a>.<\/p>\n<\/div><\/section><\/p><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-9h529x-809524ca5db5765e9b44907998c91c9d\">\n.flex_column.av-9h529x-809524ca5db5765e9b44907998c91c9d{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-9h529x-809524ca5db5765e9b44907998c91c9d av_one_full first flex_column_div av-zero-column-padding  '     ><p><div  class='hr av-95aa2t-3078ece840ede0d7bd7a11a2cd545821 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-90hnkl-9b2f55131295396c968a8bd56cb480f9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Alignment<\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-8voatx-a17229a7a7fcc5d21913239faeaec6e0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The menu items can be aligned\u00a0Left, Right or center from the Submenu option.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4741\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/submenu-align.png\" alt=\"\" width=\"830\" height=\"89\" \/><\/p>\n<p>Custom CSS can be used to align justify, or make the menu items take up equal space and add a different background color to each menu item.<\/p>\n<p><strong>Style-3<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-3\" target=\"_blank\" rel=\"noopener\">submenu items with equal space<\/a>.<\/p>\n<\/div><\/section><\/p><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-sfqdx-529a0310229debb1d8cc934e2c815d99\">\n.flex_column.av-sfqdx-529a0310229debb1d8cc934e2c815d99{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-sfqdx-529a0310229debb1d8cc934e2c815d99 av_one_full first flex_column_div av-zero-column-padding  '     ><p><div  class='hr av-r2ex9-b6367b7b39da4edf08ed7024c2728d1c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-7c6p91-654e2b7d207efea54ba770c4e62f3ab4 '   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><br \/>\n<section  class='av_textblock_section av-77jlth-c725de0a5abdcccec79f60bc5d955ed7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Let us take a look at creating a fullwidth submenu with icons as shown in the below example:<\/p>\n<p><strong>Style-4<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-4\" target=\"_blank\" rel=\"noopener\">submenu with icons<\/a>.<\/p>\n<ol>\n<li>Open a blank page and select your icons from the Advanced Layout Builder. Make sure to remove the\u00a0default icon size so we can set this up later using custom CSS.<br \/>\n<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\" \/><\/li>\n<li>Enable Debug mode and copy the icon shortcodes one by one for all menu items.<br \/>\n<strong>Note: Delete the size value if you still notice it in the shortcode.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7227 size-full\" 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\" \/><br \/>\n<\/strong><\/li>\n<li>Go to Appearance > Menu and create a new menu with icon shortcodes with the menu \u201cLink Text\u201d.<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\" \/><\/li>\n<li>\u00a0Add the below CSS to your site.<\/li>\n<\/ol>\n<\/div><\/section><\/p><\/div>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-d3hzh-b181aaf571bf0aff78f6973cdc29f423 toggle_close_all' >\n<section class='av_toggle_section av-u18l-926e0a436268c8a16f2ccc4c643d3042'  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=\"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-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS -  Fullwidth Submenu style - 4<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>\/* Icon style *\/<br \/>\n.submenu-style-4 .av-subnav-menu > li > a .av-icon-char:before {<br \/>\n  color:#000;<br \/>\n    font-size:24px;<br \/>\n  transition: transform .3s;<br \/>\n}<\/p>\n<p>.submenu-style-4 .av-subnav-menu > li > a:hover .av-icon-char:before {<br \/>\n  color:#d33131;<br \/>\n}<\/p>\n<p>.submenu-style-4 .av-subnav-menu > li > a .av-icon-char {<br \/>\n    line-height:1em;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-r2ex9-b6367b7b39da4edf08ed7024c2728d1c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Horizontal submenu items<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8voatx-a17229a7a7fcc5d21913239faeaec6e0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The submenu drop-down is by default stacked\u00a0vertically. To make it a horizontal dorp-dowm menu we are going to use custom CSS as shown in the below example.<\/p>\n<p><strong>Style-5<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-5\" target=\"_blank\" rel=\"noopener\">horizontal submenu<\/a>.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-d3hzh-b181aaf571bf0aff78f6973cdc29f423 toggle_close_all' >\n<section class='av_toggle_section av-7bg0l-10d78a0e8a62b07e6541d7407d9681bb'  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=\"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-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><\/p>\n<p>\/*----------------------------------------<br \/>\n\/\/ CSS -  Submenu Horizontal submenu<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>\/* Submenu with horizontal submenu *\/<\/p>\n<p>#top .submenu-style-5 .av-subnav-menu li {<br \/>\n    position: static !important;<br \/>\n}<\/p>\n<p>#top .submenu-style-5 .av-subnav-menu > li ul {<br \/>\n    width: 100%;<br \/>\n    text-align: center;<br \/>\n}<\/p>\n<p>#top .submenu-style-5 .av-subnav-menu > li ul li {<br \/>\n    display: inline-block;<br \/>\n}<\/p>\n<p><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-r2ex9-b6367b7b39da4edf08ed7024c2728d1c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom width submenu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>As the name suggests a Fullwidth submenu is a fullwidth element but we can use custom CSS to change the width.<\/p>\n<p><strong>Style-6<\/strong>: Example of <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-full-width-submenus\/#style-6\" target=\"_blank\" rel=\"noopener\">Custom width submenu<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-r2ex9-b6367b7b39da4edf08ed7024c2728d1c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Create a one page menu<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In this tutorial, we are going to create a one-page menu and link it to different sections on the same page.<\/p>\n<p>Example of\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-active-submenu-highlight\/\" target=\"_blank\" rel=\"noopener\">onepage menu<\/a>\u00a0(same as the example of active menu highlight) we are going to create.<\/p>\n<ul>\n<li>Create a new page and add the full-width submenu element.<\/li>\n<li>Create the required sections on the page using the \u201cColor Section\u201d element.<\/li>\n<li>Give each section a unique ID in the developer ID field.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8166\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/section-ID.png\" alt=\"\" width=\"639\" height=\"418\" \/><\/li>\n<li>Open the menu options and link the menu items to each of the section ID\u2019s.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7228\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/link-1.png\" alt=\"\" width=\"725\" height=\"292\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/link-1.png 725w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/link-1-300x121.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/link-1-705x284.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/link-1-450x181.png 450w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-r2ex9-b6367b7b39da4edf08ed7024c2728d1c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Active submenu highlight<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Now that we have created a\u00a0onepage\u00a0menu, let&#8217;s take a look at how to highlight each menu item when the corresponding section reaches the top of the page.\u00a0 Example of\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/example-of-active-submenu-highlight\/\" target=\"_blank\" rel=\"noopener\">\u00a0one-page menu highlight<\/a> we are going to create.<\/p>\n<p>Start by assigning the full-width submenu a custom CSS class name &#8220;<strong>submenu-onepage<\/strong>&#8220;.\u00a0 And add the below code snippet to your website.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-7c6p91-681681e51c463f7c66a141bd183c24a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section>\n<p><div  class='togglecontainer av-d3hzh-095fc7a0c95fa4cda32bb68219d10b21 toggle_close_all' ><\/div><br \/>\n<br \/>\n<br \/>\n<br \/>\n\/\/ Highlight one page nav<\/p>\n<p>function activateMenuItem(){<br \/>\n?><br \/>\n<script>\n     jQuery(document).scroll(function() {      \n     var sections = jQuery('.avia-section'),\n         menu   = jQuery('.av-submenu-container'),\n         nav_height = menu.outerHeight();\n         jQuery(window).on('scroll', function() {\n            var cur_pos = jQuery(this).scrollTop();\n            sections.each(function() {\n                var top = jQuery(this).offset().top - 300,\n                    bottom = top + jQuery(this).outerHeight();\n                if (cur_pos >= top && cur_pos <= bottom) {\n                    menu.find('li').removeClass('active-menu-item');                    \n                    menu.find('a[href=\"#' + jQuery(this).attr('id') + '\"]').parent('li').addClass('active-menu-item');\n                }\n            });\n        });\n    });\n \n<\/script><br \/>\n<?php\n}\nadd_action('wp_head', 'activateMenuItem');\n[\/av_codeblock]\n[\/av_toggle]\n[\/av_toggle_container]\n\n[av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' av_uid='av-2qwel']\n\n[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' custom_class='' admin_preview_bg='' av_uid='av-2xczu4h']\n\n\n<h3>Onepage Dots Menu<\/h3>\n<p>[\/av_textblock]<\/p>\n<section  class='av_textblock_section av-2vdor01-d3432ff339536d154eee4907b67acc27 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>One page dots menu is a simple menu with several dots and each dot links to a different section of the page and the dots menu stay fixed when the page scrolls.<\/p>\n<p>In this tutorial, let's take a look at modifying the \"Fullwidth submenu element\"\u00a0 to look and function like a one-page dots menu using custom CSS. Take a look at the <strong><a href=\"http:\/\/localhost\/enfold\/documentation\/onepage-dots-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">demo of one page menu<\/a><\/strong>\u00a0we are going to create.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5934\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/dots.png\" alt=\"\" width=\"1407\" height=\"786\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-a4hwsh-bf27191dc56033aec6de43b084ee181d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To create a\u00a0one-page menu, let's start with the \"Fullwidth Sub Menu\" element.<\/p>\n<ul>\n<li>Drag and drop the \"Fullwidth Sub Menu\" element and give it a custom class name \"dotsmenu\".<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5939\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/dotsmenu.png\" alt=\"\" width=\"1065\" height=\"652\" \/><\/li>\n<li>Create the number of sections you need using the \"Color Section\" element.<\/li>\n<li>Give each section a unique ID in the developer ID field.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4757\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/section-ID.png\" alt=\"\" width=\"807\" height=\"491\" \/><\/li>\n<li>Open the menu options and link the menu items to each of the section ID's.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4758\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/02\/link-1.png\" alt=\"\" width=\"725\" height=\"292\" \/><\/li>\n<li>Add the custom CSS styles below to your site.\n<pre><code>\n\/*------------------------*\/\n\/*       Dots menu\n\/*------------------------*\/\n\n#top .dotsmenu {\n  background: transparent;\n  position: fixed!important;\n  right: 10px;\n  top: 50%!important;\n  transform: translateY(-50%);\n  border: none!important;\n  max-width: 30px!important;\n}\n\n#top .dotsmenu .av-subnav-menu > li {    \n    display: inline!important;\n    margin: 10px !important;\n}\n\n#top .dotsmenu .av-subnav-menu li a {\n  max-width: 20px;\n  max-height:25px;\n  border-radius:25px; \n  overflow:hidden;\n  padding: 0 !important;\n  border: none!important;\n  \/* Dots Background color *\/\n  background: #f3f4f7;\n}\n\n#top .dotsmenu .av-subnav-menu li a .avia-bullet {\n  display: none !important;\n}\n#top .dotsmenu .av-subnav-menu li a .avia-menu-text { \nvisibility: hidden;\n}\n\n@media only screen and (max-width: 767px) {\n.responsive #top .dotsmenu {\n  background: transparent;\n  position: fixed!important;\n  right: 0;\n  top: 50%!important;\n  transform: translateY(-50%);\n}}<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-elhnp-455dfba0833e19113609031c761ad55a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1uqzx-daf0288c4a869992a429fd92820ce43d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-elhnp-455dfba0833e19113609031c761ad55a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8k9fx-3fe789c6b305bedccc076525aaf0de49 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=H62CLRp78bk\"> Full-Width Submenu Tutorial <\/a><\/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,6],"tags":[16],"class_list":["post-285","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/285","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=285"}],"version-history":[{"count":24,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"predecessor-version":[{"id":12859,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/285\/revisions\/12859"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}