How to Add a Custom Sticky Header for Mobile Using Divi

by | Dec 10, 2021 | Etcetera | 0 comments

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.

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

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

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!

See also  What Is Microsoft IIS Web Server Software?

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.

divi sticky header for mobile

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.

divi sticky header for mobile

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

divi sticky header for mobile

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.

divi sticky header for mobile

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.

divi sticky header for mobile

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

divi sticky header for mobile

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.

See also  The best way to Upload a Scrolling Information Ticker in WordPress

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.

divi sticky header for mobile

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.

divi sticky header for mobile

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

divi sticky header for mobile

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

  • Sticky Place: Keep on with Best

divi sticky header for mobile

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.

divi sticky header for mobile

Replace Menu Brand and Structure

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

divi sticky header for mobile

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

  • Taste: Left Aligned

divi sticky header for mobile

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.

divi sticky header for mobile

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

divi sticky header for mobile

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)

divi sticky header for mobile

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%
See also  How to Set up Email Marketing Campaigns with Divi Hosting by Cloudways

divi sticky header for mobile

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

divi sticky header for mobile

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.

divi sticky header for mobile

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

divi sticky header for mobile

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.

divi sticky header for mobile

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.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment