Switching Your Logo on a Fixed Header in Divi

Posted on August 30, 2017 by in Divi Resources | 31 comments

Switching Your Logo on a Fixed Header in Divi

It is always a great idea to create different versions of your logo with different colors and sizes. For example, you should probably have a dark and light version of your logo so that it will look great on different background colors. And having a smaller (less vertical and more horizontal) version of the logo for those cramped areas of your website. One of the best places to use a different version of your logo is on your fixed (or sticky) header.

In many cases, your fixed header will need a different style than your main header. If you keep the same logo, you are limited in how to style your fixed header. This is where having a custom logo comes in handy. With a separate logo customized specially for the fixed header, you can style it however you want. This give you more control over the design of your site.

In this post I’m going to show you how to:

  1. Switch your logo for a different one when your fixed header is active. (This can be done with a single line of CSS)
  2. Invert the color of your logo on your fixed header.
  3. Add a cool transition effect when switching your logo on the fixed header.
  4. Switch and move your centered header logo to the default (left aligned) layout on your fixed header.

Let’s get started.

Sneak Peek

Here is a little sneak peek of what we will accomplish in this tutorial.

Here is what a simple logo switch looks like.

fixed header logo

Here is the logo switch with a transition effect.

fixed header logo

Here is the logo changing positions from the centered header style.

fixed header logo

The Setup

Before you do anything else, make sure you complete the following:

  1. Install the latest version of Divi.
  2. Implement an active Divi Child Theme. If you need help with setting up a child theme, it is covered in this post. If you need additional help. Please contact our support team.
  3. Make two versions of your logo that are both 200×131 and add them to your WordPress Media library. One logo will be used for the main header and one will be used for your fixed header. If you can, make the fixed header version of the logo more horizontal so that it won’t get smushed vertically on the smaller fixed header.Here is an example of my main header logo I’m using.fixed header logoHere is an example of my fixed header logo. Notice I cropped out the text in order to make a simpler and more horizontal logo that fits nicely on a header with less height. It’s not likely that anyone would be able to read that text anyway and the brand is still being represented.

    fixed header logo

  4. Setup your primary menu with menu items.

Once you have completed these steps, you are ready to begin.

Switching Your Logo on a Fixed Header in Divi

Subscribe To Our Youtube Channel

Switching the Logo on Your Fixed Header using CSS

Before we get to our custom CSS, let’s setup our menu settings within the theme customizer. From the backend of your WordPress site, go to Theme Customizer > Header & Navigation > Header Format and make sure you have the default header style selected.

fixed header logo

Then go back to the Header & Navigation settings in the Theme Customizer. Select the Primary Menu Bar and update the following:

Menu Height: 105
Logo Max Height: 80
Text Size: 20

fixed header logo

Now go back to Header & Navigation. Select Fixed Navigation Settings and update the following:

Fixed Menu Height: 60
Text Size: 20

fixed header logo

You can add the rest of your settings to fit the design of your site. The menu and logo heights may need to be adjusted according to your needs. However, I suggest you keep these settings if you are wanting to add the transition effect so that the sizing is accurate. You can always come back and change it later.

Insert CSS Snippet to Switch Logo on Fixed Header

One of the simplest ways to switch your logo image with another on the fixed header is to use the CSS property “content”. If you are familiar with CSS, this is normally what is used when adding content to a :before or :after pseudo element. In this case we are going to use it to insert new content (your logo image) to replace the current logo image.

To do this, go to Theme Customizer > Additional CSS and insert the following CSS.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

fixed header logo

Now replace the text that says “INSERT NEW LOGO IMAGE” with your actual logo image.

To get the URL, go to your media library from the WordPress Dashboard and click on the image you want to add.  You can find the URL in the top right of the screen that pops up.

fixed header logo

That’s it. This simple solution will replace your logo with a new one only when the fixed header is active as you scroll throughout the page. The default logo will return when you scroll back to the very top of the page.

fixed header logo

Inverting the Color of Your Logo

If you are only looking to add a dark or light version of the same logo on the fixed header, you may like this solution.

Using the invert CSS property, you can invert the color of your logo with one a few lines of CSS. For example, if your logo is black, inverting the logo color would turn it white. And if the logo is white, it will invert to black. To add this style to your logo, go to Theme Customizer > Additional CSS and add the following CSS (make sure you delete or comment out previously added CSS):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Check out the result.  This is a black logo being inverted to a white version.

fixed header logo

Adding a Transition Effect When Switching Your Logo on the Fixed Header

You are probably wondering why I’m going to cover another (more robust) way to switch your logo on a fixed header. The main reason is so that we can add a cool transition effect to the logo when it “transitions” to the fixed header. To do this we need both logo images next to each other for styling.

Adding Your New Logo to the Header.php File

To add another logo image to your header, we need to add it to the header.php file. Using an FTP Client (like FileZilla), go to the root of your Divi Theme files and make a copy of the header.php file.

fixed header logo

Paste the copy of the header.php file into the root of your child theme folder.

fixed header logo

Next, using your preferred text editor, open the header.php file. Locate the html code for the link that holds the logo image wrapped in the div with the class “logo_container”.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

We are going to add a similiar snippet of code to display another image in your header. Copy and paste the following code directly under it.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Notice this is an updated copy of the original code above it with two differences. First, it has a new image source URL that you will need to add. And second, it a class called “second-logo”.

fixed header logo

From your WordPress dashboard, go to your media library and get the url for the new logo image you want to add.

fixed header logo

Then go back to your header.php file. Find the code snippet you just created and replace the text that reads “INSERT NEW LOGO IMAGE URL HERE” with the actual image URL.

fixed header logo

Save your header.php file.

Now you have two logos that will display side by side on your site. Chances are you don’t want to leave it like that so let’s add the necessary Custom CSS to make our transition effect.

Adding a Cool Transition when the Logo Switches on Your Fixed Header

Go to Theme Customizer > Additional CSS and delete (or comment out) the code from the previous section of this post (if applicable). Then add the following Custom CSS:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

I’ve commented the CSS code in order to let you know what the code is doing. In short the CSS is decreasing and increasing the opacity of each of the logos while moving them outside of the header. Thus, you have a pretty cool transition effect for you logo when going to your fixed header.

Changing the Location of Your Centered Header Logo to the Left for Your Fixed Header

I you like the Centered Header Style for displaying your header, you may want to check the location of that logo on your fixed header. For me, I prefer to have the default header style (with the logo left-aligned) on my fixed header. The main reason is because having the logo at the top of my navigation tends to make the fixed header a little too tall when scrolling through to view a page.

To make the switch from a centered logo to a left-aligned logo, you can add the following custom CSS in the Additional CSS box in the Theme Customizer. First add the code to switch the logo the quick and easy way:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Don’t forget to add your logo image URL.

Then add the following to adjust the placement of the logo:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Note: Make sure you take out any previous CSS from this post which would conflict.

That’s it. Check out the result.

fixed header logo

In Closing

It is hard not to be proud of a good logo. So, don’t settle for a small ineligible version or, even worse, hiding your logo on your fixed header. Switch it out for a custom version with a smooth transition that your clients will appreciate.

Coming Up

By default, Divi doesn’t include a fixed header on mobile. But adding one is really simple. In my next post I will show you how to add a custom fixed header with a different logo on mobile. Here is a little sneak peek.

I’m looking forward to it.

Don’t forget to post your comments below. If you have any issues related to setting up and editing your child theme files, please contact our support team.

Cheers.

31 Comments

  1. Wow Jason !!! Beautiful work and great tutorial, exactly what I was looking for. Thank you !!

  2. Thanks Jason, this is an essential modification in most web design projects with DIVI.

    Greetings from Asturias

  3. I was half way down reading (before looking at the author) and thought, “Who wrote this magical article?” Then, before scrolling up, I thought, “Bet it was Mr. Champagne.” Scrolled up and smiled.

    Thank you for this, Sir, and well done.

    Future plans on switching out the mobile views? I have always wanted to use Default for >981px and ‘anything else’ for <480.

  4. Jason, great article. How about the company slogan? Should it be part of the header or on a separate row below the header while designing responsive websites?

    • Jason Champagne

      Good point Ashok. We don’t really have an option for a company slogan right now.

  5. /*********************************
    change logo for fixed header (quick and easy way)
    **********************************/
    .et-fixed-header #logo {
    content: url(INSERT NEW LOGO IMAGE URL);
    }

    Works in chrome and safari but not firefox.

    • Jason Champagne

      Justin. Sorry for that. A better cross browser solution would be to add the following jQuery to your Divi Theme Options > Integration > under the “add code to the head of your blog”:

      <script>
          var imageUrl = [
        'ENTER DESKTOP LOGO IMAGE URL',
        'ENTER FIXED HEADER LOGO IMAGE URL',
          ];
       
          jQuery(window).on('scroll', function() {
              var $header = jQuery('header');
              var $logo = jQuery('#logo');
       
              if ($header.hasClass('et-fixed-header')) {
                  return $logo.attr('src', imageUrl[1]);
              };
       
              return $logo.attr('src', imageUrl[0])
          });
      </script>
      

      Then just replace the text “ENTER DESKTOP LOGO IMAGE URL” and “ENTER FIXED HEADER LOGO IMAGE URL” with your actual image URLs.

      • Hi Jason Im having a little trouble with the code for the
        Changing the Location of Your Centered Header Logo to the Left for Your Fixed Header. It changes the centre one is fine but the inline one does not sit in the correct spot. Wondered if you could help with this?

  6. This is awesome! It is something I have thought about doing in the past but never taken the time to research! Thanks!

  7. Amazing Jason, this was something I was looking for a long time. Thousands of thanks, I know I’ll use it on more than one occasion.

  8. You shouldn’t have to (nor do you) edit the PHP file to accomplish this. First, it goes without saying that this should be baked into Divi from the start. But alas…

    As Justin mentioned, the content:url method does not work in all browsers. A shame. However, there is a jQuery way, without having to edit your header.php file.

    Wrap this in script tags:

    (function($) {
    $(window).on(‘scroll’, function() {
    if(jQuery(‘#main-header’).hasClass(“et-fixed-header”)) {
    jQuery(‘#logo’).attr(‘src’,’/wp-content/uploads/logo-alt.png’);
    }
    else {
    jQuery(‘#logo’).attr(‘src’,’/wp-content/uploads/logo.png’);
    }
    });
    })( jQuery );

    The above method works by checking (on scroll) if the header is normal, or fixed. If the header has Divi’s et-fixed-header class (which is what happens when the header is sticky/floating at the top of the viewport), then it will use the “alt” logo. Otherwise, it will use the normal logo. Note you will need to set the normal logo in both theme options and then again in the “else” area of the jQuery script. This is to ensure it switches back to the normal logo when the header is no longer fixed.

    Ensure you add that jQuery script to the Header Footer (in the Footer area) plugin, and wrap it in script tags.

    • Hi Jon,

      Thanks a lot for your information. Unfortunately, being new to Divi, I am not quite sure what exactly you are describing in your last sentence above:

      “Ensure you add that jQuery script to the Header Footer (in the Footer area) plugin”.

      Are you talking of the Divi code module or the Divi Customizer or a particular plugin?
      Would be great if you could give a few more hints where and how to add that code, thanks a lot!

      • Sorry, Jon, I googled a bit and now assume you are indeed talking about a third-party WordPress plugin for this purpose. Is it the “Insert Headers and Footers” plugin or a different one you are using/recommending?
        Apart fom that plugin, is there any possibility to add that code to the footer area via i) the Divi code module or ii) the Integration section of Divi Theme Options? (The latter tool doesn’t seem to allow to add JS code to the *footer* area, AFAICS, right?) Thanks for any hints!

        • In the DIVI theme options panel you have a place to add stuff in the header.

          • Thanks a lot for your feedback, Richard, but, as I said (following Jon’s above suggestion (“in the Footer area”) I was looking for a place to add JS code to the *footer* area and it seems this isn’t possible in the Integration section of Divi Theme Options.

    • Jason Champagne

      Jon,

      I was also working on a jQuery method for cross browser support. I will be updating the post for the future. Thanks for this.

      • I concur, needs to be updated to work with jQuery. Also, the logo in fixed mode is not a clickable link.

        • Jason Champagne

          See my response to Justin above. I think that will work much better.

  9. Nice effects and I’m sure it’ll come in handy some time, but your edit of the header.php will produce ‘bad code’: You’re telling people to duplicate the logo’s code and add a class to differentiate between the ‘regular’ and ‘alternative’ logo’s. By doing that, you’re reusing an object’s ID, which is never supposed to be used more than once on a page, unlike classes.
    You’d be better off (or might as well) assign a new ID to the alternate logo and use that in your CSS.

  10. That’s awesome! You are the best developers man…

  11. This is the EXACT tutorial I needed. Thank you for all of these awesome tutorials. It is great to learn a bit instead of just pasting CSS without explanation.

  12. Is there a way to do this on a full width fixed header?

    • Jason Champagne

      Craig,

      See my alternative cross browser solution in my response to Justin above. That way should work on full width fixed headers as well.

  13. As Justin mentioned, it is not working on Firefox. Any css hack to solve it?

    • Jason Champagne

      Elisandro,

      See my jQuery option in my response to Justin above. That should work. Don’t forget to take out the CSS version when implementing this script.

  14. Hi
    What happens when the Theme is updated. Is there a possibility that the header.php file will be changed? How is that handled…

  15. This is awesome! I have been wanting to this for a while with no success until now!(partially)

    I only have one problem, when I see it on mobiles, both logos are visible. Any ideas on what may be the problem? Or is anybody else having this problem?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest