How to Build a Divi Global Header using the Divi Theme Builder

Divi Engine

Keeping on track with our Divi Tutorial Series on Building Divi Sites that don’t look like Divi Sites we turn to that distinctive Default Divi Header. Yet another dead giveaway that your site was built with Divi, but Divi Engine is here with solutions.Sure, you can use the Theme Customizer to do some basic upgrades to your Divi Header, but all the cool kids are using the Divi Theme Builder these days. In this Divi Tutorial we will show you how to use the Divi Theme Builder to replicate a nice layout we found on dribbble.com.If you don’t know dribble.com yet, it is a great resource for design inspiration when the well has dried up. We even show you a couple of awesome plugins that will help take your Divi Header and Menu game to the next level.➤ Divi Mega Menu https://diviengine.com/product/divi-mega-menu/➤ Divi Mobile https://diviengine.com/product/divi-mobile/🧑🏻‍💻 Note that all the code we use in this tutorial can be found in the Text Tutorial link below!📖 Text Tutorial @ https://diviengine.com/how-to-build-a-custom-global-header-in-divi-using-the-theme-builder/📚 How to un-Divify your Divi Sites Tutorial Series @ https://diviengine.com/how-to-un-divify-your-divi-sites/➤ Dribbble Design Inspiration https://dribbble.com/shots/7020630-Hinge-Website-Dropdown➤ Learn more about Divi Engine @ https://diviengine.com/➤ Get the Divi Theme @ https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=58998CHAPTERS00:00 Introduction00:20 Last Installment: Custom Divi Button Styles01:00 Find Inspiration on dribbble02:09 Dissecting the dribbble header03:14 Using the Theme Customizer Header Options04:38 Adding a Global Header in Divi Theme Builder05:41 Adding a 3-Column Row05:56 Adding an Image Module for the Logo06:05 Adding an Menu Module for the Menu06:28 Adding an Text Module for the Phone Number06:43 Refining the Divi Header Layout08:43 Image Module Settings09:51 Menu Module Settings11:03 Inspecting a Page reveal the CSS12:35 Text Module Settings12:57 A note on Divi Conditional Display Logic16:14 Adding CSS to the Divi Global Header16:34 Centering Divi Modules Vertically 18:40 Creating the Animated underline Effect20:24 Let’s Review the CSS22:24 Improving your Divi Global Header22:52 Divi Mega Menu24:30 Divi Mobile26:16 Conclusion