{"id":8094,"date":"2018-05-10T15:10:57","date_gmt":"2018-05-10T15:10:57","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold-assistance\/?p=8094"},"modified":"2018-05-24T01:01:14","modified_gmt":"2018-05-24T01:01:14","slug":"examples-of-full-width-submenu","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/examples-of-full-width-submenu\/","title":{"rendered":"Examples of full width submenu"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-dd698b9215e682f8d5a9111dd02dd608\">\n.avia-section.av-4cllry-dd698b9215e682f8d5a9111dd02dd608{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-1'  class='avia-section av-4cllry-dd698b9215e682f8d5a9111dd02dd608 main_color avia-section-default avia-no-border-styling  avia-builder-el-0  el_before_av_submenu  avia-builder-el-first  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><main  role=\"main\" itemprop=\"mainContentOfPage\"  class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-1  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-2  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Submenu with a phone number<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 1<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-1&#8221; assigned. We then add a phone number to a menu text and style it using custom CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-6  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-4nb6y6-ddcb9741a264e341fa752bdf523c7eca'  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 - 1<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p>\/* Links *\/<br \/>\n.submenu-style-1 .av-subnav-menu li:nth-last-child(1),<br \/>\n.submenu-style-1 .av-subnav-menu li:nth-last-child(1) a {<br \/>\nbackground: #136ad5;<br \/>\ncolor: #FFF;<br \/>\nfloat: right !important;<br \/>\nborder-left-width: 0px !important;<br \/>\nfont-weight: 800;<br \/>\nfont-size: 18px;<br \/>\n}<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#styling-links\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-8  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/main><!-- close content main element --><\/div><\/div><div id='sub_menu1'  class='av-submenu-container av-cisj2l-75d0b8f24369984dca50b6f2d09aedd2 main_color  avia-builder-el-9  el_after_av_section  el_before_av_section  submenu-style-1 submenu-not-first container_wrap sidebar_left' style='z-index:301' ><div class='container av-menu-mobile-disabled av-submenu-pos-left'><ul id='av-custom-submenu-1' class='av-subnav-menu' role='menu'>\n<li class='menu-item av-lh5w4u-bbc0cf6031e95f8e5de67b3aa7e22903 menu-item-top-level menu-item-top-level-1' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 1<\/span><\/a><\/li>\n<li class='menu-item av-idtu0e-3fb74a3ddac579a7a1bfd75d79f19d42 menu-item-top-level menu-item-top-level-2' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 2<\/span><\/a><\/li>\n<li class='menu-item av-hqm54u-f30c0dbfbd6294ca1d7fe911f90079bd menu-item-top-level menu-item-top-level-3' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 3<\/span><\/a><\/li>\n<li class='menu-item av-g50gcu-a3d3488f679b345d3e85969d2c5e6cde menu-item-top-level menu-item-top-level-4' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 4<\/span><\/a><\/li>\n<li class='menu-item av-2zdwwu-b784bc73000ffb47e3745b2a170b25fe menu-item-top-level menu-item-top-level-5' role='menuitem'><a href='tel:888-555-5678'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>888-555-5678<\/span><\/a><\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-38fa0f42aafce388cfd7259d020afef5\">\n.avia-section.av-4cllry-38fa0f42aafce388cfd7259d020afef5{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-2'  class='avia-section av-4cllry-38fa0f42aafce388cfd7259d020afef5 main_color avia-section-default avia-no-border-styling  avia-builder-el-10  el_after_av_submenu  el_before_av_submenu  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-11  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-12  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Submenu background<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 2<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-2&#8221; assigned. We can then change the background color\u00a0using custom CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-16  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-6vbf7y-1955dcc66dbe0fe893ee38a66f55c99b'  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><br \/>\n\/*----------------------------------------<br \/>\n\/\/ CSS -  Fullwidth Submenu style - 2<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>\/* Submenu background *\/<br \/>\n.submenu-style-2.av-submenu-container {<br \/>\nbackground-image: -webkit-linear-gradient(45deg, #b066fe, #63e2ff);<br \/>\nbackground-image: linear-gradient(45deg, #b066fe, #63e2ff);<br \/>\n}<\/p>\n<p><code><br \/>\n<\/code><\/p>\n<p><code>\/* Menu item style *\/<br \/>\n.submenu-style-2.av-submenu-container .av-subnav-menu &gt; li {<br \/>\npadding: 15px 0 !important;<br \/>\n}<br \/>\n.submenu-style-2.av-submenu-container .av-subnav-menu &gt; li &gt; a {<br \/>\ncolor: #FFF;<br \/>\nbackground: #2e3192;<br \/>\nborder-left-width: 0px !important;<br \/>\nfont-weight: 800;<br \/>\nfont-size: 12px;<br \/>\nline-height: 1em;<br \/>\nborder-radius: 2px;<br \/>\npadding: 10px 15px !important;<br \/>\ncursor: pointer;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#custom-background\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-18  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='sub_menu2'  class='av-submenu-container av-cisj2l-6ede21e486097e342cff666e3bceb960 main_color  avia-builder-el-19  el_after_av_section  el_before_av_section  submenu-style-2 submenu-not-first container_wrap sidebar_left' style='z-index:302' ><div class='container av-menu-mobile-disabled av-submenu-pos-left'><ul id='av-custom-submenu-2' class='av-subnav-menu' role='menu'>\n<li class='menu-item av-dxrnqm-35e2780cac5646307c3e380d80e3aca7 menu-item-top-level menu-item-top-level-1' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 1<\/span><\/a><\/li>\n<li class='menu-item av-cgmpzy-52336e1448302fd84d3cde04741a5671 menu-item-top-level menu-item-top-level-2' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 2<\/span><\/a><\/li>\n<li class='menu-item av-avvom6-ea71946da35521a1d395ffef6d39d462 menu-item-top-level menu-item-top-level-3' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 3<\/span><\/a><\/li>\n<li class='menu-item av-99ck4u-2dd66e2e37c20b2d2da7596314fb4f2c menu-item-top-level menu-item-top-level-4' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 4<\/span><\/a><\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-b8878f39ed21f6a023e446790e2a5797\">\n.avia-section.av-4cllry-b8878f39ed21f6a023e446790e2a5797{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-3'  class='avia-section av-4cllry-b8878f39ed21f6a023e446790e2a5797 main_color avia-section-default avia-no-border-styling  avia-builder-el-20  el_after_av_submenu  el_before_av_submenu  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-21  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-22  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Align Submenu Items<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 3<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-3&#8221; assigned. Using custom CSS we can align the menu items to take up equal space and add a different background color to each menu item as shown in the below example.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-6d2hj2-d6191c6b0ecb55224d65f68d32f234e6'  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=\"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-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/*----------------------------------------<br \/>\n\/\/ CSS -  Fullwidth Submenu style - 3<br \/>\n\/\/--------------------------------------*\/<br \/>\n.submenu-style-3.av-submenu-container,<br \/>\n.submenu-style-3.av-submenu-container .container {<br \/>\nbackground: transparent;<br \/>\nmax-width: 100% !important;<br \/>\n}<\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu {<br \/>\ndisplay: flex;<br \/>\njustify-content: space-around;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li {<br \/>\nflex-grow: 1;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li &gt; a {<br \/>\ncolor: #FFF;<br \/>\nbackground: transparent;<br \/>\nborder-left-width: 0px !important;<br \/>\ncursor: pointer;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li:nth-child(1) {<br \/>\nbackground-color: #4285f4;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li:nth-child(2) {<br \/>\nbackground-color: #34a853;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li:nth-child(3) {<br \/>\nbackground-color: #fbbc05;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>.submenu-style-3.av-submenu-container .av-subnav-menu &gt; li:nth-child(4) {<br \/>\nbackground-color: #ea4335;<br \/>\n}<\/p>\n<p><code><br \/>\n<\/code><\/p>\n<p><code><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#alignment\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-28  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='sub_menu3'  class='av-submenu-container av-cisj2l-cb5b695b922ea7c139bdb13f2f70c51b main_color  avia-builder-el-29  el_after_av_section  el_before_av_section  submenu-style-3 submenu-not-first container_wrap sidebar_left' style='z-index:303' ><div class='container av-menu-mobile-disabled av-submenu-pos-left'><ul id='av-custom-submenu-3' class='av-subnav-menu' role='menu'>\n<li class='menu-item av-7lihu6-91c2f5b9dfdd6147b8f8949444ef696a menu-item-top-level menu-item-top-level-1' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 1<\/span><\/a><\/li>\n<li class='menu-item av-6lvpa6-4b663969707c07d1a43c3703a465380c menu-item-top-level menu-item-top-level-2' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 2<\/span><\/a><\/li>\n<li class='menu-item av-3q49z2-38cfff34462e5e2d4353d8c2e98a3d49 menu-item-top-level menu-item-top-level-3' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 3<\/span><\/a><\/li>\n<li class='menu-item av-2e5lha-6dba268315c64746ec4c79f9d0ce8a59 menu-item-top-level menu-item-top-level-4' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 4<\/span><\/a><\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-831a7d2ea4308885ff069cbc972f0813\">\n.avia-section.av-4cllry-831a7d2ea4308885ff069cbc972f0813{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-4'  class='avia-section av-4cllry-831a7d2ea4308885ff069cbc972f0813 main_color avia-section-default avia-no-border-styling  avia-builder-el-30  el_after_av_submenu  el_before_av_submenu  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-31  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-32  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Submenu With Icons<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 4<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-4&#8221; assigned. We can then change the background color\u00a0using custom CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-36  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-4orx3i-04668a385ede09631d5d0ffc90906bcc'  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=\"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-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/*----------------------------------------<br \/>\n\/\/ CSS -  Fullwidth Submenu style - 4<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p>\/* Icon style *\/<br \/>\n.submenu-style-4 .av-subnav-menu &gt; li &gt; a .av-icon-char:before {<br \/>\ncolor:#000;<br \/>\nfont-size:24px;<br \/>\ntransition: transform .3s;<br \/>\n}<\/p>\n<p>.submenu-style-4 .av-subnav-menu &gt; li &gt; a:hover .av-icon-char:before {<br \/>\ncolor:#d33131;<br \/>\n}<\/p>\n<p>.submenu-style-4 .av-subnav-menu &gt; li &gt; a .av-icon-char {<br \/>\nline-height:1em;<br \/>\n}<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#add-icons-to-menu-item\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-38  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='sub_menu4'  class='av-submenu-container av-cisj2l-58cc3d0d41bf0ccfae3ad6ebb88a32e8 main_color  avia-builder-el-39  el_after_av_section  el_before_av_section  submenu-style-4 submenu-not-first container_wrap sidebar_left' style='z-index:304' ><div class='container av-menu-mobile-disabled av-submenu-pos-center'><ul id=\"menu-example-icon-menu\" class=\"av-subnav-menu\" role=\"menu\"><li role=\"menuitem\" id=\"menu-item-8142\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-1\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\"><span  class='av_font_icon av-av_font_icon-833ae38021a653d19110b84b8ddfcdbe avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue80a' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><\/span> Members<\/span><span class=\"avia-menu-fx\"><span class=\"avia-arrow-wrap\"><span class=\"avia-arrow\"><\/span><\/span><\/span><\/a><\/li>\n<li role=\"menuitem\" id=\"menu-item-8143\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-2\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\"><span  class='av_font_icon av-av_font_icon-f63ad658ca851ec38ddd2b90cfe94be6 avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue80f' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><\/span> Photos<\/span><span class=\"avia-menu-fx\"><span class=\"avia-arrow-wrap\"><span class=\"avia-arrow\"><\/span><\/span><\/span><\/a><\/li>\n<li role=\"menuitem\" id=\"menu-item-8144\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-3\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\"><span  class='av_font_icon av-av_font_icon-25b4682c1d54c5e288d57d99a9a6047e avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue82f' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><\/span> Uploads<\/span><span class=\"avia-menu-fx\"><span class=\"avia-arrow-wrap\"><span class=\"avia-arrow\"><\/span><\/span><\/span><\/a><\/li>\n<li role=\"menuitem\" id=\"menu-item-8145\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-4\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\"><span  class='av_font_icon av-av_font_icon-968e4d38dad4fbd1c7abede15f417fe8 avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue805' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><\/span> Contact<\/span><span class=\"avia-menu-fx\"><span class=\"avia-arrow-wrap\"><span class=\"avia-arrow\"><\/span><\/span><\/span><\/a><\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-5887e9369fafe3a2bac9b883747fa32c\">\n.avia-section.av-4cllry-5887e9369fafe3a2bac9b883747fa32c{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-5'  class='avia-section av-4cllry-5887e9369fafe3a2bac9b883747fa32c main_color avia-section-default avia-no-border-styling  avia-builder-el-40  el_after_av_submenu  el_before_av_submenu  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-41  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-42  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Submenu with horizontal submenus<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 5<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-5&#8221; assigned. By default, the submenu drop-down is vertically stacked but we can change that to\u00a0a horizontal drop-down menu by using custom CSS.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-46  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-22dn4u-002cf06938b26c43fa8984fc402fd582'  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=\"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-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/*----------------------------------------<br \/>\n\/\/ CSS -  Submenu Horizontal submenu<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>\/* Submenu with horizontal submenu *\/<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>#top .submenu-style-5 .av-subnav-menu li {<br \/>\nposition: static !important;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>#top .submenu-style-5 .av-subnav-menu &gt; li ul {<br \/>\nwidth: 100%;<br \/>\ntext-align: center;<br \/>\n}<\/p>\n<p><code><code><\/code><\/code><\/p>\n<p>#top .submenu-style-5 .av-subnav-menu &gt; li ul li {<br \/>\ndisplay: inline-block;<br \/>\n}<\/p>\n<p><code><br \/>\n<\/code><\/p>\n<p><code><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#horizontal-submenu-items\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-48  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='sub_menu5'  class='av-submenu-container av-cisj2l-97eedc64f86ea9a5931dfc2a3ecf8b54 main_color  avia-builder-el-49  el_after_av_section  el_before_av_section  submenu-style-5 submenu-not-first container_wrap sidebar_left' style='z-index:305' ><div class='container av-menu-mobile-disabled av-submenu-pos-center'><ul id=\"menu-example-submenu-horizontal-dropdown\" class=\"av-subnav-menu\" role=\"menu\"><li role=\"menuitem\" id=\"menu-item-8174\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-top-level menu-item-top-level-1\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\">Hover me<\/span><span class=\"avia-menu-fx\"><span class=\"avia-arrow-wrap\"><span class=\"avia-arrow\"><\/span><\/span><\/span><\/a>\n\n\n<ul class=\"sub-menu\">\n\t<li role=\"menuitem\" id=\"menu-item-8178\" class=\"menu-item menu-item-type-custom menu-item-object-custom\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\">Submenu &#8211; 1<\/span><\/a><\/li>\n\t<li role=\"menuitem\" id=\"menu-item-8179\" class=\"menu-item menu-item-type-custom menu-item-object-custom\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\">Submenu &#8211; 2<\/span><\/a><\/li>\n\t<li role=\"menuitem\" id=\"menu-item-8180\" class=\"menu-item menu-item-type-custom menu-item-object-custom\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\">Submenu &#8211; 3<\/span><\/a><\/li>\n\t<li role=\"menuitem\" id=\"menu-item-8181\" class=\"menu-item menu-item-type-custom menu-item-object-custom\"><a href=\"#\" itemprop=\"url\" tabindex=\"0\"><span class=\"avia-bullet\"><\/span><span class=\"avia-menu-text\">Submenu &#8211; 4<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-aff49b720b0054595d025266a7538a2d\">\n.avia-section.av-4cllry-aff49b720b0054595d025266a7538a2d{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='style-6'  class='avia-section av-4cllry-aff49b720b0054595d025266a7538a2d main_color avia-section-default avia-no-border-styling  avia-builder-el-50  el_after_av_submenu  el_before_av_submenu  avia-bg-style-scroll av-minimum-height av-minimum-height-75 av-height-75  container_wrap sidebar_left'   data-av_minimum_height_pc='75' data-av_min_height_opt='75'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-96e8z2-deb2df318f2dae5142a81545996efe3b\">\n.flex_column.av-96e8z2-deb2df318f2dae5142a81545996efe3b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-96e8z2-deb2df318f2dae5142a81545996efe3b av_one_fifth  avia-builder-el-51  el_before_av_three_fifth  avia-builder-el-first  first flex_column_div av-zero-column-padding  '     ><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-84sxu6-9885955c4ef2204be6a49bea030dc84b\">\n.flex_column.av-84sxu6-9885955c4ef2204be6a49bea030dc84b{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-84sxu6-9885955c4ef2204be6a49bea030dc84b av_three_fifth  avia-builder-el-52  el_after_av_one_fifth  el_before_av_one_fifth  flex_column_div av-zero-column-padding  '     ><section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3 style=\"text-align: left;\"><b>Custom submenu width<\/b><\/h3>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Fullwidth Submenu Style &#8211; 6<\/strong>: The below fullwidth element has a custom CSS class name &#8220;submenu-style-6&#8221; assigned. As the name suggests a Fullwidth submenu is a fullwidth element but we can use custom CSS to change the width.<\/p>\n<\/div><\/section><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: left;\"><strong>Code Snippet:<\/strong><\/p>\n<\/div><\/section><br \/>\n<div  class='togglecontainer av-5gg5am-42c6c02e72834d1107c07c632344e9af av-minimal-toggle  avia-builder-el-56  el_after_av_textblock  el_before_av_textblock  toggle_close_all' >\n<section class='av_toggle_section av-2kh07i-06dabbfc200c6b55f8efe714accd216f'  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=\"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-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><br \/>\n\/*----------------------------------------<br \/>\n\/\/ CSS -  Fullwidth Submenu style - 6<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p>\/* Custom width submenu *\/<br \/>\n#top .submenu-style-6.av-submenu-container {<br \/>\nmax-width: 708px!important;<br \/>\nleft:50%;<br \/>\ntransform:translateX(-50%);<br \/>\nbackground: #FC5C7D; \/* fallback for old browsers *\/<br \/>\nbackground: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D); \/* Chrome 10-25, Safari 5.1-6 *\/<br \/>\nbackground: linear-gradient(to right, #6A82FB, #FC5C7D); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/<br \/>\n}<br \/>\n.submenu-style-6.av-submenu-container .av-subnav-menu &gt; li &gt; a {<br \/>\nbackground:transparent;<br \/>\ncolor:#FFF;<br \/>\n}<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div><br \/>\n<section  class='av_textblock_section av-1xxbj2-b6eba64dc0a9e9df57b4c0c7e049c241 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\"><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/fullwidth-sub-menu\/#custom-width-submenu\">Back to the article<\/a><\/p>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51\">\n.flex_column.av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-2mlqjy-c5b22e240a3e9726996cc70b5c845e51 av_one_fifth  avia-builder-el-58  el_after_av_three_fifth  avia-builder-el-last  flex_column_div av-zero-column-padding  '     ><\/div><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='sub_menu6'  class='av-submenu-container av-cisj2l-206bc55e091cc130767c1b65698c39fd main_color  avia-builder-el-59  el_after_av_section  el_before_av_section  submenu-style-6 submenu-not-first container_wrap sidebar_left' style='z-index:306' ><div class='container av-menu-mobile-disabled av-submenu-pos-center'><ul id='av-custom-submenu-6' class='av-subnav-menu' role='menu'>\n<li class='menu-item av-7lihu6-91c2f5b9dfdd6147b8f8949444ef696a menu-item-top-level menu-item-top-level-1' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 1<\/span><\/a><\/li>\n<li class='menu-item av-6lvpa6-4b663969707c07d1a43c3703a465380c menu-item-top-level menu-item-top-level-2' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 2<\/span><\/a><\/li>\n<li class='menu-item av-3q49z2-38cfff34462e5e2d4353d8c2e98a3d49 menu-item-top-level menu-item-top-level-3' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 3<\/span><\/a><\/li>\n<li class='menu-item av-2e5lha-6dba268315c64746ec4c79f9d0ce8a59 menu-item-top-level menu-item-top-level-4' role='menuitem'><a href='#'  ><span class='avia-bullet'><\/span><span class='avia-menu-text'>Menu Item 4<\/span><\/a><\/li>\n<\/ul><\/div><\/div><\/p>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4cllry-ec7ff30b7f0452f0e19efa7740213177\">\n.avia-section.av-4cllry-ec7ff30b7f0452f0e19efa7740213177{\nbackground-color:#eaeaea;\nbackground-image:unset;\n}\n<\/style>\n<div id='negative-margin'  class='avia-section av-4cllry-ec7ff30b7f0452f0e19efa7740213177 main_color avia-section-default avia-no-border-styling  avia-builder-el-60  el_after_av_submenu  avia-builder-el-last  avia-bg-style-scroll av-minimum-height av-minimum-height-25 av-height-25  container_wrap sidebar_left'   data-av_minimum_height_pc='25' data-av_min_height_opt='25'><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'><\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='after_section_7'  class='main_color av_default_container_wrap container_wrap sidebar_left'  ><div class='container av-section-cont-open' ><div class='template-page content  av-content-small units'><div class='post-entry post-entry-type-page post-entry-8094'><div class='entry-content-wrapper clearfix'>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[11],"tags":[],"class_list":["post-8094","post","type-post","status-publish","format-standard","hentry","category-example-post","example-post"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8094","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=8094"}],"version-history":[{"count":50,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8094\/revisions"}],"predecessor-version":[{"id":8656,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8094\/revisions\/8656"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=8094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=8094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=8094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}