How to Add a Custom Fixed Header for Mobile Using Divi

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

How to Add a Custom Fixed Header for Mobile Using Divi

Having a fixed header (or navigation) on mobile can increase the usability of your site if done correctly. Fixed navigation in general seem to be than standard headers. In this high speed world of technology, that is a considerable stat even if it was half of that.

And, with Divi, adding a fixed header to your site can be done with a few lines of CSS. Divi already allows you to customize your mobile headers using the Theme Customizer, but currently there is no built in setting for deploying a fixed header for mobile. In this tutorial, I’m going to show you how to add a custom fixed header on mobile that includes the following:

  • A different (more mobile friendly) logo than your desktop version.
  • A shorter header to allow more available viewing space.
  • A larger clickable hamburger navigation icon to make it easier to deploy the mobile nav.
  • A semi-transparent background that makes the header even more intrusive when viewing the site.

Here is a little sneak peek of what the header will look like.

fixed header

The Setup

This setup is similiar to my previous post on Switching Your Logo on a Fixed Header. Before you begin, make sure you complete the following:

  1. Make sure you have the latest version of Divi installed.
  2. Create an active primary menu for your site.
  3. 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

  4. 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 headerHere 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

  5. Setup your primary menu with menu items.

    Since we will be adding custom CSS to accomplish the fixed header, we don’t need to customize the standard header or fixed header options in the Theme Customizer. But, if you want to duplicate the settings for menu and logo sizes in my example, complete the following (this is completely optional):

    Go to 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

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

    Fixed Menu Height: 60
    Text Size: 20

    fixed header

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

How to Add a Custom Fixed Header for Mobile Using Divi

Getting Started

We will be implementing this design entering custom CSS under the Additional CSS section in the Divi Theme Customizer. Because we will be targeting mobile devices only, we are going to wrap all of our CSS in a media query that limits the styling to browser widths less than 980px. Go ahead and start by entering the following in the Additional CSS box:

@media (max-width: 980px) {



}

fixed header

Creating your Mobile Fixed Header Using CSS

Since Divi already adds a class called “et-fixed-header” when the user scrolls down the page, we can use that selector in our custom CSS to create and style our mobile fixed header.

This first group of CSS below makes the header fixed (or sticky) at the top of the page and then adjusts the height of the fixed header to 55px. It also adds a semi-transparent white background color. Add the following to your Additional CSS in the Theme Customizer within the Media Query brackets.

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple suggests that all clickable UI elements for their Apps be so that our thumbs and fingers can click them easily. This would be a good guide for the elements in the mobile fixed header. The following CSS makes the navigation icon 45px.

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

Lastly, let’s add more height for our logo on the fixed header so we can see it better. Enter the following CSS:

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

That’s it! We are all done.
Here is the final collection of CSS to create your mobile fixed header:

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

Save your settings. Now you have a working mobile fixed header.

fixed header

Switching your Logo on Your Mobile Fixed Header

If you want to use a different logo for your mobile fixed header, you can do this fairly easily with some jQuery. All you need is the URLs for both of the logos you are going to use. The first logo image URL should be the default Logo you are already using for your site. The second logo image URL should be the logo you want to use for the mobile fixed header. Make sure you upload both logos to the media library and retrieve the URL’s.

Once you have both URL’s, go to the WordPress dashboard and navigate to Divi > Theme Options > Integrations. Find the “Add code to the head of your blog” input box and enter the following jQuery script:

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

fixed header

Now replace the text “ENTER DESKTOP LOGO IMAGE URL” with the url of the logo that you are currently using for your site.

Then replace the text “ENTER MOBILE LOGO IMAGE URL” with the url of the logo you want to use only for mobile devices.

Save settings and check out the results.

fixed header

Browser Support

In this post, I created the fixed header using CSS only, relying heavily on the CSS property “position:fixed”. This CSS property can be of mobile browsers, especially on iOS Safari and Android. But these days “position:fixed” is pretty well supported on newer versions of mobile browsers (except for Opera Mini).

There are other more robust plugins and JavaScript solutions out there but I thought it best to give you the simple CSS version. Please consider exploring those options if this solution doesn’t work for you.

Final Thoughts

It is worth mentioning that mobile fixed headers can be detrimental to usability. Because they continue to block the top portion of your browser at all times, if you are not careful, you may waste valuable real estate for no good reason. Remember, not everyone has a like this guy.

fixed header

That’s why it is important to customize your fixed header for mobile devices by giving it a shorter height, a different logo, and a bigger nav button. And by adding a few lines of CSS to your Divi website, you can have a fixed header on mobile without having to use a third party plugin. So if it makes sense to add one to your next project, go for it. Having this kind of functionality can improve the UI of your website.

I look forward to hearing from you in the comments.

Cheers!

16 Comments

  1. Great Jason, I can not wait to try it: D

    Greetings from Asturias

  2. Now we just need to get this added to Divi by default:

    • Great link Jon – thank you for that – really useful 🙂

  3. Thanks – Great post – been waiting for this for ages?

    Is it easy to adjust so that we can swap the desktop logo to the mobile version – not just the fixed mobile logo?

    • Jason Champagne

      Try replacing the code in your script with this:

          var imageUrl = [
        'ENTER DESKTOP LOGO IMAGE URL',
        'ENTER MOBILE LOGO IMAGE URL',
          ];
       
          jQuery(window).on('scroll', function() {
              var $header = jQuery('header');
              var $logo = jQuery('#logo');
       
              if (jQuery(window).width() < 981) {
                  return $logo.attr('src', imageUrl[1]);
              };
       
              return $logo.attr('src', imageUrl[0])
          });
      
  4. Actually! I questioned about Mobile Headers in your old post before a week or two! Got the post as worthier and it relates well to what i had questioned.

    Thank You!

  5. Love this! I implemented but there’s a small gap above the mobile header when I scroll down on mobile. It seems to be leaving space for the #top-header even though that scrolls away. Seems like a quick fix, but any ideas to try?

    • Okay, I seemed to have found a fix but I’m not sure it’s the best one…

      added the margin-top: -31px;

      to this CSS…

      .et_fixed_nav #main-header.et-fixed-header {
      position: fixed;
      background: rgba(255,255,255,0.8);
      height: 55px;
      margin-top: -31px;
      }

      Anyone have a better fix?

      • Jason Champagne

        Brad,

        Did you check it out on an actual phone or incognito browser? I would sometimes get that result when I was viewing it in the theme customizer while logged in. It may have had something to do with adjusting to the admin bar.

        Let me know if you still have the issue.

        Thanks.

        • Hi Brad, I get the same issue. If I check on different mobile devices, there is a gap at the top as it shows on the phone simulator.

          Any idea how to fix this?

          Thanks!

  6. Great article

    Only thing I am looking forward to do the same effect but not in the header logo. I want it in the Image module.

    What I am looking forward is that when the mouse hovers over the image, it turns to another image. Both images are identical in size, one is black and one is blue.

    Is this possible?

  7. Hey, this is great and really useful. But it also highlights why Divi and Extra need to be merged cause I’m pretty certain this won’t work on Extra, am I right? Nothing, Divi code tricks, plugins work for Extra, only Divi.

  8. Hi Jason, great article.
    Can’t get the “Switching Logo on Mobile Fixed Header” to work on iPhone and iPad.
    Added an onLoad function as well. Without this isn’t working either.

    var imageUrl = [
    ‘DESKTOP LOGO IMAGE 1 URL’,
    ‘DESKTOP LOGO IMAGE 2 URL’,
    ];

    jQuery(window).on(‘load’, function() {
    var $header = jQuery(‘header’);
    var $logo = jQuery(‘#logo’);

    if ((jQuery(window).width() 980)) {
    return $logo.attr(‘src’, imageUrl[1]);
    };
    });

    jQuery(window).on(‘scroll’, function() {
    var $header = jQuery(‘header’);
    var $logo = jQuery(‘#logo’);

    if ((jQuery(window).width() < 981) &&
    ($header.hasClass('et-fixed-header'))) {
    return $logo.attr('src', imageUrl[1]);
    };

    if ((jQuery(window).width() 980)) {
    return $logo.attr(‘src’, imageUrl[1]);
    };

    });

    Works on desktop (IE/FF/Chrome)on Mac (FF/Chrome not Safari) and Samsung tablet Android. However not on iPhones and iPads.

    Some help appreciated 🙂

  9. How to make fixed header like that with Extra?

    I’ve tried with similar ways, but it only works in theme customization only, when it saved and the page was loaded, nav bar won’t fixed on small screen again

    • Help me please

  10. Is there any way to do this using the Header Style “Centred Inline Logo”?

    I really want to make the logo central on a mobile and central inline with the menu on a desktop.

    Thanks 🙂

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