Site icon Hip-Hop Website Design and Development

How to Add a Custom Sticky Header for Mobile Using Divi

Pixeldust WordPress Developer

Typically, adding a sticky (or fixed) header to your website is a safe play for larger screens (desktops) because there is more room. Adding a sticky header on mobile devices with smaller viewports (especially phones) requires a little more finesse. You don’t want that sticky header taking up too much of the viewport. I mean, there’s no point in boosting the navigation experience with a sticky header if you can’t see the pages you visit. For this reason, sometimes it is easier to add a sticky header specifically designed for mobile.

In this tutorial, we are going to show you how to add a custom sticky header for mobile using Divi. Using Divi’s built-in options (including the sticky position options), we’ll show you how to display a completely custom sticky header that includes those crucial elements (like a logo, a button, and a menu icon) without taking up too much space.

Let’s get started!

Sneak Peek

Here is a quick look at the sticky header for mobile we’ll build in this tutorial.

Sticky Header on Desktop

Sticky Header on Tablet

Sticky Header on Phone

Download the Sticky Header for Mobile Template 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.

Download the Files
.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

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

Let’s get to the tutorial, shall we?

Adding a Custom Sticky Header for Mobile Using Divi

Part 1: Adding a Premade Header Template in the Divi Theme Builder

For this tutorial, we are going to add a custom sticky header for mobile to one of our free header templates using the Divi Theme Builder. First, download the import file from the blog post featuring the Landscape Maintenance header and footer template.

Once downloaded, follow these steps:

  1. Navigate to the Divi Theme Builder in the backend of your WordPress website.
  2. Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.
  3. In the portability popup, navigate to the import tab.
  4. Select the JSON file which you were able to download.
  5. Uncheck the Options to override existing templates.
  6. Then click on ‘Import Divi Theme Builder Templates’.
  7. Once you’ve uploaded the file, you’ll notice a new header and footer template. To modify the header template’s elements, start by opening the template’s custom header.

Inside the Header Layout Builder, open the layers view for easier access to the elements.

Part 2: Optimizing Top Header Element on Mobile

This particular header layout has two sections. The top section contains a logo, a CTA, and a Button. The bottom section has a sticky position already and contains the menu.

Since we are going to add a logo to a new sticky menu on mobile, we need to hide the logo in the top section on tablet and phone. To do this, open the settings for column 1 in the row of the top section and, under the advanced tab, select disable on Phone and Tablet. This will hide the entire column and the logo it contains on mobile.

Next, open the settings for column 2 in the same row and make sure no devices are disabled. Since our logo will be disabled on mobile, we have room for this call to action on mobile.

For aesthetic purposes, update the text alignment for the two text modules that make up the call to action in column 2 as follows:

Part 3: Building a New Sticky Header Section for Mobile

For mobile devices, it is important to decrease the height of the sticky header as much as possible so that it doesn’t take up to much of the viewport when scrolling. For this reason, we aren’t going to make the top section of the header sticky. Instead,  we are going to create a new sticky section that will only show on mobile. This way we can include elements that are specific to mobile and won’t take up too much vertical space in the sticky state.

To create the new sticky header section, duplicate the existing bottom section that contains the menu. You can also label the new section “Sticky Mobile Section” for reference later.

Hide Existing Sticky Section on Mobile

Since we are going to include a menu in our mobile sticky section, open the settings of the existing sticky section and select Disable on Phone and Tablet.

Next, open the settings for the new mobile sticky section and select Disable on Desktop.

Make sure to give the new mobile sticky section a sticky position as follows:

Update Row Sizing

At this point,  it is a good idea to start editing in tablet view to get a better sense of what the design will look like on mobile. To do this, click the tablet icon in the setting menu at the bottom of the builder.

Then, open the row settings and update the following sizing options:

This will give us more room on mobile.

Update Menu Logo and Layout

Next, open the menu settings and add a logo to the menu.

Under the design tab, update the style of the layout:

Part 4: Adding Sticky State Styling to Sticky Elements

Now that the elements are in place for the mobile sticky header, we can start optimizing the style of the elements in the sticky state.

Because the section has a sticky position, you will be able to toggle the sticky position options when styling the section or any child elements within the section. You can toggle the sticky position styling by clicking the thumbtack icon when hovering over a style option.

This will allow us to give the sticky header a different design once the user scrolls and activates the sticky state of the section.

Sticky Section Background Color

To start, let’s update the background color of the mobile sticky section as follows:

Sticky Section Box Shadow

Under the design tab, give the section a box shadow in the sticky state as follows:

Sticky Menu Logo and Icons

Next, update the logo image with a filter that inverts the dark logo into a light logo image by default and then inverts it back to a dark logo in the sticky state. Under the Logo options, update the following:

We also need to change the color of the icons as follows:

Sticky Header Button

Currently the button in the top section of the header will not show in the sticky header on mobile.  We can add the same button to the new mobile sticky section and then make it appear only in the sticky state.

To add the button, copy the existing button in column 3 of the row in the top section. Then paste the button module under the menu in the mobile sticky section.

To make the button sit on top of the menu, open the button settings and, under the Advanced tab,  update the position options as follows:

Under the design tab, update the filter option to change the opacity of the button from 0% to 100% in the sticky state.

This will hide the button from view until the user scrolls down the page.

Final Result

To view the result, save the layout, assign the template to a page on your website, and then save changes in the theme builder. Then open the page that has been assigned the template.

Here is the result.

Sticky Header on Desktop

Sticky Header on Tablet

Sticky Header on Phone

Final Thoughts

With Divi, you have the luxury of thinking mobile-first when it comes to those sticky headers. We just showed you how easy it is to add a sticky header for mobile using Divi’s built-in options. Once you unlock the power of Divi’s sticky options, you can get pretty creative with how you transition the elements of the sticky header. You can invert the logo from light to dark with a filter, make a button appear, or change the entire background color of the header. And that’s just the beginning. Feel free to experiment with more customizations that fit the needs of 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 How to Add a Custom Sticky Header for Mobile Using Divi appeared first on Elegant Themes Blog.