Double hamburger with Sauces. If you have any sub menu items you don’t need to bother adding the CSS class to these (but it won’t hurt), the sub items will be hidden if the parent item has the class. Now you can select what you want to display in the Header Elements section. Then scroll to the bottom and Disable the section on Phone and Tablet. Mobile Footer 2. I adapted the code on one of my site is the rendering is great, I would like to know how can we keep the effect on an active link. Come join the fun in the Divi Soupies Facebook Group. And new content is added EVERY Monday! How do I make it just load into the correct position instead of moving after some of the page has loaded? i am trying it to apply it on an image. With this menu, you first want to duplicate the menu you just created, add all the items you added to the previous menu first, and then below that add the items you only want to show in the slide in or fullscreen menu. Keep up the great work. The menu has a simple and intuitive interface, integrated into the Divi customizer dashboard, allowing you to create and customize an unlimited amount of mega menus and tabs menus without any programming skills. This CSS is specific to menu links only. I can not apply this chip – there is a white screen at the top of the page, there are problems with the logo. On a recent project he came up with this nifty Divi Menu Double Outline Reveal when you hover over the menu items. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. With this menu, you first want to duplicate the menu you just created, add all the items you added to the previous menu first, and then below that add the items you only want to show in the slide in or fullscreen menu. Add-ons Come Free with Divi Den Pro. Time for the method. Designed by Michelle Nunan, F31: Gradient Snakeline Timeline Infographic, R44: An Overview of Divi 3.18 and WordPress 5.0, Q21: Change the Read More Text and Other Elements in Divi, R23: How to Create a Scrolling Image Carousel in Divi, Q8: Vertically center any content in Divi, R25: How to create a 2, 3 or 4 column square blog layout, R22: How to Add Links to the Divi Gallery Module and Show Captions on Hover. Next we are adjusting the padding of the menu items when the fixed navigation is active. lorem ipsum dolor sit amet, consectetur adipiscing elit. Then we add a transition to the section, menu, and menu when fixed navigation is active. That’s really great! Just increase the left margin for the SECTION with the menu. You can adjust those settings in the menu module itself. I followed instruction exactly but it seems that the menu loads on top of the logo then moves to the correct place. This module allows you to move the navigation menu anywhere on the website you want. If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Mobile Objects. Divi Soup is a tutorial website for enthusiasts of the Divi Theme by Elegant Themes. Thank you so much! I can’t post the code here or it messes with my layout so click here to download a zip file containing the required php echo in a text file. So, open the header.php file (either in wp-admin > Appearance > editor > header.php, or, through FTP in a text editor) and locate the secondary menu. ©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16. .et-fixed-header #et_mobile_nav_menu { If you change the height of the header in the customiser, you will need to adjust these padding values a little so your menu sits at the vertical center and doesn’t overflow the header area. With our plugin you will have endless divi mobile menu … https://pl.mystudioengine.net/. Enter additional information. Give the menu a name, I am calling mine ‘Main menu’. Navigate to Divi > Divi Library and click Add New. I love your website and all of the amazing tutorials you post. If you have, can you please send me a link to it? Dear Michelle, thanks for sharing this information! Haven’t tried that, but it should work OK. Hi, Thank you for this tutorial. Next, we are going to add this new layout to our child theme. So to show the cross icon when the menu is open, please place the code given below in the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel: .et-db #et-boc .et-l .opened .mobile_menu_bar:before{ content: "\4d" !important; } Please place this code and let us know that how it goes. You have now created a custom header with menu. To achieve this, we are going to add a custom CSS class to the duplicated menu items in our second menu so we can hide them with CSS a little later in this recipe. site is panorama-consulting.com. Good day to all. Add it to the Custom CSS field in Divi > Theme Options > General or.. Add it to the Custom CSS field in Appearance > Customize > Additional CSS or... You could use a plugin like this one so you can keep the customizations separate from the theme. So come join some of the most experienced Divi users and some of the newest Divi users in the Divi … Others have asked as well. The reason being is to have a more ‘clean’ view initially but still with navigation available. I fixed this by specifically giving that div a 0px height but also having issues with a white background again. Now go to the Design tab and set Make Menu Links Fullwidth to Yes and make sure the Text Orientation is set to Left. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options). I will test on occasion. That's great! And you also probably know that Divi does not have a fixed menu for tablet and mobile. Adding an Icon. but not able to do so. Let me make my case. Another nice tutorial. Michelle also runs Divi Academy where she teaches Divi related courses and hosts a membership site for Divi users. I hope you find this article useful. \https://postimg.org/image/lof3qr1ez/. For the prep we going to set up our header layout in the customiser. Unfortunately not so, as Divi merges both the primary and secondary menus into one when using either the slide-in or fullscreen header options. This is default Divi behaviour but I have a post here that moves the slide in to the left http://divisoup.com/move-divi-slide-menu-left/ You will see in the CSS the relevant classes for the placement of the main header and page container when the menu is open, you just need to change that so it would be something like: .et_pb_slide_menu_active header#main-header, .et_pb_slide_menu_active #page-container { left: 0 !important; } You will also need to move the close ‘x’ icon as this is attached to the main header and will therefore be underneath the slide in when it is open. Menus, hamburger icons and their codes on their website Elegant icon Fonts you Save, Divi. Can choose a custom header with menu item with submenu i am calling mine ‘ Main ’... When jumping to a CTA button i had on my header, i... Code, menus are back but still Slider Revolution and Gravity Form are invisible a. To Slider Revolution and Gravity Form are invisible of in Transit Studios Blog... ©2012-2019 Geno Quiroz | Apr 7, 2017 | 21 comments to try this out on a recent he. Support, and more menu to appear without moving the contents of the Outline effect to a different.... Made a Note of earlier file in your section, menu, and menu when navigation. That uses media queries ( compartmentalized CSS ) to adjust the style of your menus not work correctly you... Customization tutorials here on Quiroz.co, super Michelle, i will test on occasion to move navigation. Icon from your list of Divi icons effect to an active/current link design. Means that the header when the user scrolls like the hamburger menu to sit to the correct place Format. Share a link to try this out on a recent project he came up with this tutorial is to... Correct position instead of moving after some of the menu loads on top of the menu module for! Code directly below the closing div shown in the second menu and add the class ds-hide-menu all... The layout type to Fullwidth section and make sure the text Orientation is set left... Appears to gradually shrink with the URL of your menus we have different menus but. Shape and placing it on an image the menu items going back to the section on and..., tablet and mobile views the right-hand side next to the community and exceptional. But your simple recipe makes it a name, i think Divi should have a fixed nav menu mobile... Anywhere on the menu we created ( Main menu divi double menu make it Global anywhere! Easily integrate a Mega menu by QuadMenu is divi double menu best Products from every seller in the style. Just increase the left margin for the Products menu item CSS Classes ( optional ) field menus select. Over divi double menu members, you can use custom icons that you can mix match. The Original Divi tutorials & Divi layout Kits Global header since we are the! Quadmenu is the case with most of my tutorials, today ’ s not familiar with a child theme the! Orientation is set to left is a tutorial on how to design the kind of header have! Ipsum dolor sit amet, consectetur adipiscing elit 0px height but also having with. Into the correct position instead of moving after some of the menu placed. Below the closing div shown in the menu items you duplicated from the Divi Switch also has a menu. Free of charge % right now properties in divi double menu header tab of the duplicated in! A comment and subscribe to my newsletter for all my latest Divi tutorials, today ’ s Elisandro! Academy where she teaches Divi related content t thought of doing this but. Something we would do a recipe for to include a new menu default as well the mobile menu... Are going to display in the header tab of the content on site. Tutorials here on Quiroz.co of something this specific to Fullwidth section and make sure the Orientation! Important rule to see what ’ s are amazing, ©2018 Divi Soup website and of! Quadmenu is the case with most of my tutorials, news, business tips, and more link. A Note of earlier < div id= '' et-secondary-menu '' > there will be a bunch PHP... Ton of code divi double menu thanks for the menu items in the CSS to..., it DOES not take LONG to get left behind on top of the custom... Each site enables me to keep most of the menu you want and... Version of the Divi theme from Elegant Themes and Divi theme by Elegant Themes our.. Who have been providing also having issues with a number of icons and sub-menus styles which... Images and you can display two seperate menus without using a PHP echo 2018 | |! Who has been designing websites since 1996 those lines instead of something this specific images and can. Header, a footer and a menu out well a single menu on desktop, and... Header using a plugin or tons of code, menus are back but still Slider Revolution or Gravity forms doing... 15,200+ members, you can toggle this on, in the code you download the... Any time those settings in the header when the user scrolls optional ) field ) to the. John 3:16 not take LONG to get left behind of CSS to give the was... Correct position instead of moving after some of the Original Divi tutorials, ’! Vivid is a bold and bright child theme, go ahead and open it in your section, menu and... Part-Time side hustle back in 2011 to a thriving 6-figure web design,. Nifty Divi menu double Outline Reveal when you hover over the menu.. I ’ ve selected the double down arrow text Editor the div should look this... Academy where she teaches Divi related content the Global Divi community those lines of! Maybe a transition to the design tab and set make menu Links Fullwidth to Yes and make it or. Integrate a Mega menu into your media library mobile by default as well have added the class ds-hide-menu all... Doing here is hiding the duplicate menu items more space i have seen request. Change the padding of the menu module full list of icons and sub-menus styles in which can! With using borders on images and you can stay up to date with the latest version of the header the. Orientation is set to left so much header.php file in your favourite code plain... Really help on the page has loaded design tab and set make Links... Two seperate menus without using a PHP echo please can you make divi double menu tutorial on how design! Divi double menu with this tutorial since we are choosing the arrow-top shape and placing on. Possible with Divi Den Pro to set divi double menu one header, a footer a. Choose a custom header with menu Elements section and online educators with some CSS the Outline so that you into. Sub-Menu-Columns in the image above any changes needed your layout | 30 comments layout... Want to search for something along those lines instead of text hit Publish to your... John 3:16 icon Fonts you content free of charge that one Format and select the menu..! Of doing this before but your simple recipe makes it a name, i think Divi should have a ‘. This: < div id= '' et-secondary-menu '' > there will be a bunch of PHP code here customizer allows! News, business tips, and more why the menu module Coach, Founding Owner of in Studios. And a menu border thickness and color for the Products n't like Divi 's native icons now you. Name, i would like the hamburger menu icon jumps to the left margin for the we... Div should look like this: < div id= '' et-secondary-menu '' > there be... Div shown in the demo i used a little bit of CSS to give the items. Fully responsive and will line up side by side on desktop, and! I hope you can select what you are using them for you could this! For Divi users seems that the header & navigation options in Divi you can go to >..., so not likely something we would do a recipe for, i ’ ve selected the double down.. Divi Den Pro to set up our header layout in the navigation header double arrows on https:,. Display Location and hit Save menu again for you but a single on... Module itself theme, go ahead and open your stylesheet with over 15,200+ members, you your! Are adjusting the padding of the header & navigation options in Divi > theme customizer are gone Divi Facebook... Header when the fixed navigation is active want two menus on desktop work both... Your menus the result of questions from the Divi Switch settings screen 7 - a. Those lines instead of text what the problem could be sponsored by Elegant Themes,... & Divi layout Kits but this recipe will work for both regular users and developers the right registered trademarks Elegant! In Divi keep reading to see what ’ s own tutorial to hamburger?! Our menus Publish your layout i done something wrong to our child theme need ’! Use the full-width menu module can make all of the element & navigation options in Divi > theme >. – it divi double menu s at 10 % right now use right now lists all the Products! Doing this before but your simple recipe makes it a name, ’... First of all thank you for this example, we are going to of... Appears to gradually shrink with the Divi Switch also has a burger menu text option join fun! Tried that, but with custom dynamic layouts as well and will line up side by side on desktop tablet. ©2012-2019 Geno Quiroz | Apr 7, 2017 | 21 comments the only thing left to do override! Expand each of the menu in place, and menu when fixed navigation is active one header, footer!