Switching Your Logo on a Sticky Header in Divi

Nov 11, 2021 | 0 comments

When designing a sticky header on your website, switching the logo can open up new design opportunities. For example, you may want to use a different background color for the sticky header but need a different logo to make the design work. Or, you may need a different version of the logo that doesn’t stand out as much and distract users.

In this tutorial, we are going to show you how to switch your logo on a sticky header in Divi. Using the Divi theme builder, we are going to build a new header with two logos that switch when the user engages the header’s sticky state.

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Import the Header Template to the Divi Theme Builder

To import the header template, you will need to navigate to Divi > Theme Builder.

Then use the portability icon at the top right of the page to import the JSON file.

switching-logo-on-sticky-header-in-divi

Let’s get to the tutorial, shall we?

Switching Your Logo on a Sticky Header in Divi

Part 1: Building a New Header in the Divi Theme Builder

For this tutorial, we are going to build a new header using the Theme Builder.

To do this, navigate to the Theme Builder.

Add a new template and assign it to All Pages (or to a test page). Then click to build a new header inside the new template.

switching-logo-on-sticky-header-in-divi

This will open the header template editor so we can start building the header from scratch.

Part 2: Creating the Sticky Section and Row

Add Row

To kick things off, go ahead and add a one-fourth three-fourths column row to the default regular section.

switching-logo-on-sticky-header-in-divi

Section Settings

To make this a sticky header, we are going to add a sticky position to the section. Open the section settings and, under the advanced tab, update the sticky position as follows:

  • Sticky Position: Stick to Top

switching-logo-on-sticky-header-in-divi

Under the content tab, add a background color for the desktop and for the sticky state as follows:

  • Background Color (desktop): #f6f0e7
  • Background Color (sticky): #000000

switching-logo-on-sticky-header-in-divi

Under the design tab, update the padding:

  • Padding: 0px top, 0px bottom

switching-logo-on-sticky-header-in-divi

Row Settings

Now that the section is complete, we are ready to update the row settings. Open the settings for the row and update the following design settings:

  • Gutter Width: 1
  • Width: 96%
  • Padding: 10px top, 10px bottom

switching-logo-on-sticky-header-in-divi

Part 3: Adding the Switching Logos

In order to create the switching logo effect whenever the header is in the sticky state, we are going to create two images that slide in and out of view. The main logo will be displayed initially and then a new sticky state logo will slide into view once the user scrolls down the page

Creating the Main Logo

To create the main logo, add a new image module to the left column.

switching-logo-on-sticky-header-in-divi

Upload a logo image to the module (around 200px by 67px). You can also add a dynamic link to the homepage as well.

switching-logo-on-sticky-header-in-divi

Under the design tab, give the image a max height as follows:

  • Max Height: 67px (desktop), 45px (tablet and phone)

switching-logo-on-sticky-header-in-divi

Then update the following transform translate option in the sticky state:

  • Transform Translate Y-axis (sticky): -100%

This will move the logo up outside of the column to hide it from view in the sticky state.

switching-logo-on-sticky-header-in-divi

Creating the Sticky State Logo

To create the sticky state logo, duplicate the image module with the logo we just created.

switching-logo-on-sticky-header-in-divi

Open the settings of the duplicate image module and upload a new logo image (the one you want to show in the sticky state. For best results, the logo should be the same size.

switching-logo-on-sticky-header-in-divi

Under the advanced tab, give the image an absolute position.

  • Position: Absolute

The logo should now sit directly on top of the main logo.

switching-logo-on-sticky-header-in-divi

Under the design tab, update the transform options as follows:

  • Transform Translate Y Axis (desktop): 100%
  • Transform Translate Y Axis (sticky): 0%

switching-logo-on-sticky-header-in-divi

This will make the logo sit below the main logo image initially and then slide up into place once the header is in the sticky state.

Part 4: Change Column Overflow to Hidden

Currently, the sticky state logo will remain visible outside of the column. To change this, we need to update the overflow visibility of the column as follows:

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

switching-logo-on-sticky-header-in-divi

The Result

At this point, the switching logo functionality is in place. Here is a preview of the switching logos.

Part 5: Creating the Menu

To finish off the design, we need to add a menu to the header. To do this, add a new menu module to the right column of the row.

switching-logo-on-sticky-header-in-divi

Under the menu settings, select the menu you want to use and give the menu a transparent background.

switching-logo-on-sticky-header-in-divi

Under the design tab, update the following:

  • Menu Font: Roboto
  • Menu Font Weight: Bold
  • Menu Text Color: #000 (desktop), #fff (sticky)
  • Menu Text Size: 18px
  • Menu Line Height: 1.3em
  • Text Alignment: right
  • Dropdown Menu Background Color: #fff
  • Dropdown Menu Line Color: #000
  • Dropdown Menu Text Color: #000 (desktop), #000 (sticky)
  • Mobile Menu Background Color: #fff
  • Mobile Menu Text Color: #000 (desktop), #000 (sticky)
  • Hamburger Menu Icon Color: #000 (desktop), #fff (sticky)
  • Margin (desktop): 14px top
  • Margin (tablet and phone): 5px top
  • Padding (tablet and phone) 5px bottom
  • Rounded Corners: 3px
  • Border Width (tablet and phone): 1px
  • Border Color : #ddd (desktop), #333 (sticky)

switching-logo-on-sticky-header-in-divi

Final Result

Final Thoughts

With Divi, you don’t have to keep the same logo for your sticky headers. We just showed you how easy it is to do using Divi’s built-in options. No extra code is needed. Once you unlock the power of Divi’s sticky options, you can get pretty creative with how you transition the logos in and out of view. Hopefully, this little trick will come in handy on your next project!

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post Switching Your Logo on a Sticky Header in Divi appeared first on Elegant Themes Blog.

Get More Clients:

What would one more client per month mean for your business? Click here for commitment-free SEO and digital advertising. Financing available.