Divi Soup is a tutorial website for enthusiasts of the Divi Theme by Elegant Themes.. Founded by Michelle Nunan, a full time Divi educator and child theme developer, Divi Soup aims to bring useful tutorials, tips and tricks to both new and experienced Divi users.

To show the Divi hamburger menu on desktop, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save. /*show hamburger menu on desktop*/ @ media (min-width: 980px) { .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu { display: none; } .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu { display: flex; float: none; margin: 0 6px ; align-items: center; } } Feb 13, 2017 · In this Divi tutorial I am going to show you how to create large square main menu buttons in your Divi main menu. I used this technique on the main menu for one of my blogs: MontereyBayFun.com. I also used a similar technique on MontereyPremier.com and on this site as well. Highly Customizable Divi Blog Module. Divi Blog Extras can easily transform the look and feel of a blog page running on Divi and Extra theme. All the available Divi blog layouts are highly customizable from the builder and can also be overridden in child theme to obtain a completely new layout.

Oct 24, 2017 · The primary and secondary menus merge in both tablet and mobile layouts. I found this CSS code – #mobile_menu li:not([id]) { display:none !important; } – on Divi Booster, which is supposed to hide the secondary menu items, but it hides both the primary and secondary menus from showing in mobile and tablet layouts.

Oct 21, 2019 · Divi’s default header has a built in option to make the header or nav menu fixed on scroll. This makes it stick to the top of the screen when the user scrolls, to all the important navigation menu links are right within reach.

UPDATE: 29th July 2017: Recipe #23 – How to create a scrolling image carousel is so far the most popular recipe on Divi Soup.It has the most page views and most comments with around 300 at the time of updating this post. Mar 29, 2017 · Add the following CSS and adjust the max-width to determine when the hamburger replaces your normal Divi menu. A max-width of 1024 pixels should be good to wrap on tablets but by increasing this amount you can achieve the same effect on smaller desktop and laptop screens.

Mar 29, 2017 · Add the following CSS and adjust the max-width to determine when the hamburger replaces your normal Divi menu. A max-width of 1024 pixels should be good to wrap on tablets but by increasing this amount you can achieve the same effect on smaller desktop and laptop screens. Oct 31, 2017 · ” By default, Divi doesn’t provide us with many options to style the dropdown menu but with just a few lines of CSS, you can dramatically change the look of your sub-menu to separate your look from the average Divi design! In this video, I show you how to adjust the sub-menu color, text alignment, hover over state and more.

Oct 21, 2019 · Divi’s default header has a built in option to make the header or nav menu fixed on scroll. This makes it stick to the top of the screen when the user scrolls, to all the important navigation menu links are right within reach. Aug 30, 2020 · The hero area shows a background graphic of a mountain with a comparable graphic overlapping it, all in numerous tones of red with darker tones for the graphics in the foreground. The foreground graphic expands in size as you scroll. The header shows a hamburger menu with strong lines and a CTA in yellow with a strong black border. From our burgers and sandwiches to our house made sharable sides, shakes and pies, our menu is fun, tasty and always zinfully delicious.

Changelog: * V1.0 * - Initial Version * * V1.1 * - Made surrounding row optional * * V1.2 * - Added better support for the Divi Mega Menu * * V1.3 * - Fixed responsive text size/line height issues * * V1.4 * - Used correct action on enqueueing stylesheets * * V1.5 * - Added a basic vertical mode * * V1.6 * - Moved from init to builder ready * - Added CSS to fix the mobile menu and stop it from ...

Elegant Themes has introduced Divi theme since 2013 as their latest theme innovation until today when it comes with Divi 3.0 which has the most powerful and flexible performance that they ever had. This theme builder is designed for those who want to create a really unique WordPress-based website faster and easier even if it is his first time ... May 05, 2020 · A hamburger sidebar navigation (also called off-canvas menu) built using checkbox input, CSS/CSS3, and Font Awesome icons.

Divi uses a two-menu system (one for desktop, one for mobile). On mobile, Divi will hide UberMenu and show its default responsive menu, which will result in a non-functional mobile menu. On desktop, the Divi CSS interferes and breaks the menu due to residual styling.

Jul 06, 2014 · Having one main menu is fine for lots of sites but sometimes it’s nice to be able to split your content between a Primary and Secondary Menu or even have a Footer Menu beneath your Footer area. With Divi you can add all three menus via the Navigation settings in the Customiser.

May 16, 2020 · It includes a hamburger menu in white within a dark blue circle. I’m hovering over the Divi Mobile menu, which has now swapped colors. Clicking the hamburger menu opens the menu, which slides in from the side and covers the entire side of the screen. I’ve opened the menu in the theme customizer to show the tabs. Divi Theme News, Tips, Tricks & Help. Useful Tutorials and Blog about Divi Theme and Elegant Themes, Updated Regularly. Written by a Divi Enthusiast.