In most cases, including a sticky (or fastened) header on your site is a secure play for greater monitors (desktops) as a result of there’s extra space. Including a sticky header on cellular gadgets with smaller viewports (particularly telephones) calls for slightly extra finesse. You don’t need that sticky header taking over an excessive amount of of the viewport. I imply, there’s no level in boosting the navigation enjoy with a sticky header if you’ll’t see the pages you consult with. Because of this, on occasion it’s more uncomplicated so as to add a sticky header particularly designed for cellular.

On this educational, we’re going to display you methods to upload a customized sticky header for cellular the use of Divi. The use of Divi’s integrated choices (together with the sticky place choices), we’ll display you methods to show an absolutely customized sticky header that incorporates the ones an important components (like a symbol, a button, and a menu icon) with out taking over an excessive amount of house.

Let’s get began!

Sneak Peek

Here’s a fast take a look at the sticky header for cellular we’ll construct on this educational.

Sticky Header on Desktop

Sticky Header on Pill

Sticky Header on Telephone

Obtain the Sticky Header for Cellular Template for FREE

To put your fingers at the designs from this educational, you’ll first wish to obtain it the use of the button underneath. To achieve get right of entry to to the obtain it is important to subscribe to our Divi Day-to-day e mail checklist via the use of the shape underneath. As a brand new subscriber, you’ll obtain much more Divi goodness and a loose Divi Structure pack each Monday! Should you’re already at the checklist, merely input your e mail deal with underneath and click on obtain. You’ll now not be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media handiest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 sturdy { 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 sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

See also  10 Best AI Logo Generators in 2023 (Most are Free)

Obtain For Unfastened

Sign up for the Divi Publication and we can e mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus lots of different superb and loose Divi sources, guidelines and methods. Apply alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely kind to your e mail deal with underneath and click on obtain to get right of entry to the structure pack.

DOWNLOAD

You may have effectively subscribed. Please take a look at your e mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi structure packs!

Import the Template to the Divi Theme Builder

To import the header template, it is important to navigate to Divi > Theme Builder.

Then use the portability icon on the peak proper of the web page to import the JSON record.

Let’s get to the academic, lets?

Including a Customized Sticky Header for Cellular The use of Divi

Section 1: Including a Premade Header Template within the Divi Theme Builder

For this educational, we’re going to upload a customized sticky header for cellular to considered one of our loose header templates the use of the Divi Theme Builder. First, download the import file from the weblog publish that includes the Panorama Upkeep header and footer template.

As soon as downloaded, observe those steps:

1. Navigate to the Divi Theme Builder within the backend of your WordPress site.
2. Then, within the peak proper nook, you’ll see an icon with two arrows. Click on at the icon.
3. Within the portability popup, navigate to the import tab.
4. Make a choice the JSON record which you have been in a position to obtain.
5. Uncheck the Choices to override current templates.
6. Then click on on ‘Import Divi Theme Builder Templates’.
7. While you’ve uploaded the record, you’ll realize a brand new header and footer template. To change the header template’s components, get started via opening the template’s customized header.

Throughout the Header Structure Builder, open the layers view for more uncomplicated get right of entry to to the weather.

Section 2: Optimizing Best Header Part on Cellular

This actual header structure has two sections. The highest phase accommodates a symbol, a CTA, and a Button. The ground phase has a sticky place already and accommodates the menu.

Since we’re going to upload a symbol to a brand new sticky menu on cellular, we wish to conceal the brand within the peak phase on pill and contact. To try this, open the settings for column 1 within the row of the highest phase and, underneath the complex tab, make a choice disable on Telephone and Pill. This will likely conceal all the column and the brand it accommodates on cellular.

Subsequent, open the settings for column 2 in the similar row and ensure no gadgets are disabled. Since our brand will probably be disabled on cellular, we have now room for this name to motion on cellular.

For classy functions, replace the textual content alignment for the 2 textual content modules that make up the decision to motion in column 2 as follows:

• Textual content Alignment (pill and contact): Left

Section 3: Construction a New Sticky Header Segment for Cellular

For cellular gadgets, you will need to lower the peak of the sticky header up to imaginable in order that it doesn’t take as much as a lot of the viewport when scrolling. Because of this, we aren’t going to make the highest phase of the header sticky. As a substitute,  we’re going to create a brand new sticky phase that can handiest display on cellular. This fashion we will be able to come with components which might be particular to cellular and received’t take in an excessive amount of vertical house within the sticky state.

To create the brand new sticky header phase, replica the prevailing backside phase that accommodates the menu. You’ll be able to additionally label the brand new phase “Sticky Cellular Segment” for reference later.

Conceal Current Sticky Segment on Cellular

Since we’re going to come with a menu in our cellular sticky phase, open the settings of the prevailing sticky phase and make a choice Disable on Telephone and Pill.

Subsequent, open the settings for the brand new cellular sticky phase and make a choice Disable on Desktop.

Remember to give the brand new cellular sticky phase a sticky place as follows:

• Sticky Place: Keep on with Best

Replace Row Sizing

At this level,  this is a excellent concept to start out modifying in pill view to get a greater sense of what the design will seem like on cellular. To try this, click on the pill icon within the environment menu on the backside of the builder.

Then, open the row settings and replace the next sizing choices:

• Gutter Width: 1
• Width: 94%

This will likely give us extra space on cellular.

Replace Menu Brand and Structure

Subsequent, open the menu settings and upload a symbol to the menu.

Underneath the design tab, replace the manner of the structure:

• Taste: Left Aligned

Section 4: Including Sticky State Styling to Sticky Components

Now that the weather are in position for the cellular sticky header, we will be able to get started optimizing the manner of the weather within the sticky state.

Since the phase has a sticky place, it is possible for you to to toggle the sticky place choices when styling the phase or any kid components inside the phase. You’ll be able to toggle the sticky place styling via clicking the thumbtack icon when soaring over a method choice.

This will likely permit us to present the sticky header a unique design as soon as the consumer scrolls and turns on the sticky state of the phase.

Sticky Segment Background Colour

To start out, let’s replace the background coloration of the cellular sticky phase as follows:

• Background Colour (desktop): #244435
• Background Colour (sticky): #fff

Sticky Segment Field Shadow

Underneath the design tab, give the phase a field shadow within the sticky state as follows:

• Field Shadow: see screenshot
• Shadow Colour (desktop): clear
• Shadow Colour (sticky): rgba(0,0,0,0.1)

Sticky Menu Brand and Icons

Subsequent, replace the brand symbol with a clear out that inverts the darkish brand into a gentle brand symbol via default after which inverts it again to a gloomy brand within the sticky state. Underneath the Brand choices, replace the next:

• Symbol Invert (desktop): 0%
• Symbol Invert (sticky): 100%

We additionally wish to exchange the colour of the icons as follows:

• Buying groceries Cart Icon Colour(desktop): #fff
• Buying groceries Cart Icon Colour(sticky): #244435
• Seek Icon Colour(desktop): #fff
• Seek Icon Colour(sticky): #244435
• Hamburger Menu Icon Colour(desktop): #fff
• Hamburger Menu Icon Colour(sticky): #244435

Sticky Header Button

Recently the button within the peak phase of the header is not going to display within the sticky header on cellular.  We will be able to upload the similar button to the brand new cellular sticky phase after which make it seem handiest within the sticky state.

So as to add the button, replica the prevailing button in column 3 of the row within the peak phase. Then paste the button module underneath the menu within the cellular sticky phase.

To make the button take a seat on peak of the menu, open the button settings and, underneath the Complex tab,  replace the placement choices as follows:

• Place: Absolute
• Location: Heart

Underneath the design tab, replace the clear out strategy to exchange the opacity of the button from 0% to 100% within the sticky state.

• Opacity (desktop): 0%
• Opacity (sticky): 100%

This will likely conceal the button from view till the consumer scrolls down the web page.

Ultimate End result

To view the end result, save the structure, assign the template to a web page for your site, after which save adjustments within the theme builder. Then open the web page that has been assigned the template.

This is the end result.

Sticky Header on Desktop

Sticky Header on Pill

Sticky Header on Telephone

Ultimate Ideas

With Divi, you’ve got the luxurious of pondering mobile-first with regards to the ones sticky headers. We simply confirmed you ways simple it’s so as to add a sticky header for cellular the use of Divi’s integrated choices. While you release the facility of Divi’s sticky choices, you’ll get beautiful ingenious with the way you transition the weather of the sticky header. You’ll be able to invert the brand from mild to darkish with a clear out, make a button seem, or exchange all the background coloration of the header. And that’s only the start. Be at liberty to experiment with extra customizations that are compatible the desires of your subsequent mission!

I sit up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} 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);show:block;margin: 0 auto;}

The publish How to Add a Custom Sticky Header for Mobile Using Divi gave the impression first on Elegant Themes Blog.

read more