A Day On: An inquiry of work, life, balance

Creating a Divi Header With An Overlapping Logo That Pops

by | Jan 29, 2022 | Web Design, Web Life Secrets

Improve The Style Of Your Divi Header

 

I used to use the standard Divi Header in various configurations but after a while I became bored. Mistakenly, I thought that those were the only options available on the Divi Theme… and then I discovered the Divi Theme Builder. Below are the instructions for spicing up your Divi Header. There’s a video at the bottom if you just want to follow along as I do it to my site!

Get to Know the Divi Theme Builder

If you want a particular style of header or body configuration or footer applied to some or all of your pages you can create special headers, footers or even body areas in the Divi Theme Builder. You can easily access the Divi Theme Builder by hovering over “Divi” on your WordPress Administrator left menu and then selecting the Divi Theme Builder sub-menu item.

Create A new Global Header Using The Divi Theme Builder

Simply I like to start from the top.

 

Create The Top Blue Email and Phone Bar

  1. On your section begin by making all margins and padding set to 0 this removes any padding that Divi adds automatically
  2. Grab the color from the logo (Use the Photoshop “Color Picker” It’s a little eyedropper icon!)
  3. Create a row with one column
  4. Background Color: BLUE
  5. Design > Sizing> Width 100% > Max Width 2100 > Row alignment: Center
  6. Spacing Margin: All 0px > Padding all 0px
  7. Add Text Module
  8. Type in your email and phone number (We could add social media icons, too, if we wanted!)
  9. Design > Text Bold > Color White > 16px > Spacing 3px top and bottom > 5% right

Create The Middle Logo and Menu Area

  1. Set up image for your logo png, maybe some shadow photoshop
  2. I used a 1/4 3/4 column structure
  3. Overall  Design > Sizing > Width: 100% > Max Width: 2100px > Height: 70px > Max Height: 70px
  4. Spacing: Margin> 0px top and bottom > Padding 0px top and bottom

Add an Image Module

  1. Image Module – upload your png logo – link to home page – Alignment: Center
  2. Set sizing Width: 300px and Max Width: 300px
  3. Spacing – turn OFF “Show Space Below the Image”
  4. Margin: Desktop -30px top > -50px bottom > 5% Left
  5. Margin: Tablet 0px top and bottom > 5% Left
  6. Margin: Phone 0px top and bottom > auto Left and Right (Centers it!)

Add A Menu Module

  1. Assign Main Menu
  2. No additional elements
  3. Design > Layout > Style: Left Aligned
  4. Menu Text > Pick your colors, font, weight, size
  5. Text Alignment (Right) on Desktop; (Phone and Tablet settings don’t matter because we’re going to disable this menu on those devices!)
  6. Spacing: Desktop: 20px Margin; 15% Right margin (Tablet and Phone settings don’t matter: gonna disable!)
  7. Advanced > Visibility Disable on Phone and Tablet

Create the Centered Mobile Menu Module and Divi Section

  1. Create new Row Full Width Column Structure – Advanced > Visibility: Disable on Desktop
  2. Duplicate the Menu Module and add it to the new Row
  3. Design > Layout > Centered
  4. All your menu text design options should probably stay the same

Add A Couple Nice Touches to Spice Things Up

  1. Add a background image behind the menu/logo by adding Background image to background of whole section. This should be something light enough or dark enough so that your logo and menu text stand out against it.
  2. Make Section stick to the top by going to Advanced > Scroll Effects > Sticky Position: Stick to Top
  3. Hint: because we’re messing with moving elements margins and controls won’t show up correctly, you can hover over the element you want and when the outlines show up (Blue for Sections, Green For Rows and Black for Modules) you can just double click and edit that particular element.

Thanks for tuning in to watch this Divi How-To video.

Check out other videos on our Web Life Secrets YouTube Channel and on the WebLifeSecrets blog.