Maximum frequently, together with a sticky (or fixed) header to your site is a protected play for larger shows (desktops) on account of there’s more room. Together with a sticky header on cell devices with smaller viewports (in particular phones) requires somewhat additional finesse. You don’t want that sticky header taking up a great deal of of the viewport. I indicate, there’s no degree in boosting the navigation experience with a sticky header for those who’ll’t see the pages you talk over with. As a result of this, each so frequently it’s more uncomplicated to be able to upload a sticky header particularly designed for cell.

In this tutorial, we’re going to show you the easiest way to add a custom designed sticky header for cell the use of Divi. The use of Divi’s built-in alternatives (at the side of the sticky position alternatives), we’ll show you the easiest way to turn an absolutely custom designed sticky header that accommodates those an important portions (like a logo, a button, and a menu icon) without taking up a great deal of area.

Let’s get started!

Sneak Peek

Right here’s a quick check out the sticky header for cell we’ll assemble 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 position your arms on the designs from this tutorial, you will first need to download it the use of the button underneath. To comprehend get entry to to the download you will need to subscribe to our Divi Day by day electronic mail tick list by the use of the use of the form underneath. As a brand spanking new subscriber, you will download a lot more Divi goodness and a unfastened Divi Layout pack each and every Monday! Will have to you’re already on the tick list, simply enter your electronic mail deal with underneath and click on on download. You’re going to not be “resubscribed” or download additional emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:faster than { border-top-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:faster than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:faster than { border-top-color: transparent !very important; border-left-color: #ffffff !very important; }
@media very best show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:faster than { border-top-color: #ffffff !very important; border-left-color: transparent !very important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !very important; border-left-color: transparent !very important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:faster than { background: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !very important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very 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 tough { 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 tough, .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 !very important;}

See also  Exploiting WordPress: A Complete Information to Automattic’s Weaknesses in Montana…

Download For Free

Join the Divi E-newsletter and we will electronic mail you a duplicate of the ultimate Divi Landing Internet web page Layout Pack, plus lots of various glorious and unfastened Divi property, pointers and guidelines. Apply along and you will be a Divi grab in no time. In case you’re already subscribed simply sort in your electronic mail deal with underneath and click on on download to get entry to the construction pack.

DOWNLOAD

You’re going to have successfully subscribed. Please check out your electronic mail deal with to confirm your subscription and get get entry to to unfastened weekly Divi construction 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 correct of the internet web page to import the JSON file.

Let’s get to the educational, shall we?

Together with a Custom designed Sticky Header for Mobile The use of Divi

Phase 1: Together with a Premade Header Template throughout the Divi Theme Builder

For this tutorial, we’re going to add a custom designed sticky header for cell to regarded as certainly one of our unfastened header templates the use of the Divi Theme Builder. First, download the import file from the blog post that comes with the Landscape Upkeep header and footer template.

Once downloaded, follow the ones steps:

1. Navigate to the Divi Theme Builder throughout the backend of your WordPress site.
2. Then, throughout the top correct corner, you’ll see an icon with two arrows. Click on on on the icon.
3. Throughout the portability popup, navigate to the import tab.
4. Make a choice the JSON file which you were in a position to procure.
5. Uncheck the Possible choices to override provide templates.
6. Then click on on on ‘Import Divi Theme Builder Templates’.
7. In case you’ve uploaded the file, you’ll perceive a brand spanking new header and footer template. To modify the header template’s portions, get began by the use of opening the template’s custom designed header.

Throughout the Header Layout Builder, open the layers view for more uncomplicated get entry to to the elements.

Phase 2: Optimizing Best Header Element on Mobile

This particular header construction has two sections. The very best section accommodates a logo, a CTA, and a Button. The bottom section has a sticky position already and accommodates the menu.

Since we’re going to add a logo to a brand spanking new sticky menu on cell, we need to hide the brand throughout the top section on tablet and call. To do this, open the settings for column 1 throughout the row of the very best section and, beneath the difficult tab, choose disable on Phone and Tablet. This will likely hide all the column and the brand it accommodates on cell.

Next, open the settings for column 2 within the identical row and make sure no devices are disabled. Since our logo it is going to be disabled on cell, we’ve got room for this identify to movement on cell.

For stylish purposes, substitute the text alignment for the two text modules that make up the verdict to movement in column 2 as follows:

• Text Alignment (tablet and call): Left

Phase 3: Building a New Sticky Header Phase for Mobile

For cell devices, you will need to decrease the height of the sticky header as much as possible so that it doesn’t take up to a large number of the viewport when scrolling. As a result of this, we aren’t going to make the very best section of the header sticky. As an alternative,  we’re going to create a brand spanking new sticky section that may very best show on cell. This way we will include portions which will also be specific to cell and won’t soak up a great deal of vertical area throughout the sticky state.

To create the new sticky header section, replica the present bottom section that accommodates the menu. You’ll be capable to moreover label the new section “Sticky Mobile Phase” for reference later.

Hide Present Sticky Phase on Mobile

Since we’re going to return with a menu in our cell sticky section, open the settings of the present sticky section and choose Disable on Phone and Tablet.

Next, open the settings for the new cell sticky section and choose Disable on Desktop.

You’ll need to give the new cell sticky section a sticky position as follows:

• Sticky Position: Keep on with Best

Change Row Sizing

At this degree,  this can be a excellent idea to start enhancing in tablet view to get a better sense of what the design will seem to be on cell. To do this, click on at the tablet icon throughout the atmosphere menu at the bottom of the builder.

Then, open the row settings and substitute the following sizing alternatives:

• Gutter Width: 1
• Width: 94%

This can provide us more room on cell.

Change Menu Brand and Layout

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

Beneath the design tab, substitute the best way of the construction:

• Style: Left Aligned

Phase 4: Together with Sticky State Styling to Sticky Portions

Now that the elements are in place for the cell sticky header, we will get began optimizing the best way of the elements throughout the sticky state.

Because the section has a sticky position, it’s imaginable so that you can to toggle the sticky position alternatives when styling the section or any child portions throughout the section. You’ll be capable to toggle the sticky position styling by the use of clicking the thumbtack icon when hovering over a style selection.

This will likely allow us to give you the sticky header a unique design once the individual scrolls and turns at the sticky state of the section.

Sticky Phase Background Color

To begin out, let’s substitute the background shade of the cell sticky section as follows:

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

Sticky Phase Box Shadow

Beneath the design tab, give the section a box shadow throughout the sticky state as follows:

• Box Shadow: see screenshot
• Shadow Color (desktop): transparent
• Shadow Color (sticky): rgba(0,0,0,0.1)

Sticky Menu Brand and Icons

Next, substitute the brand image with a filter out that inverts the dark logo into a steady logo image by the use of default and then inverts it once more to a dark logo throughout the sticky state. Beneath the Brand alternatives, substitute the following:

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

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

• Purchasing groceries Cart Icon Color(desktop): #fff
• Purchasing groceries Cart Icon Color(sticky): #244435
• Search Icon Color(desktop): #fff
• Search Icon Color(sticky): #244435
• Hamburger Menu Icon Color(desktop): #fff
• Hamburger Menu Icon Color(sticky): #244435

Sticky Header Button

Nowadays the button throughout the top section of the header gained’t show throughout the sticky header on cell.  We will be able to add the identical button to the new cell sticky section and then make it appear very best throughout the sticky state.

With the intention to upload the button, replica the present button in column 3 of the row throughout the top section. Then paste the button module beneath the menu throughout the cell sticky section.

To make the button take a seat down on top of the menu, open the button settings and, beneath the Sophisticated tab,  substitute the position alternatives as follows:

• Position: Absolute
• Location: Middle

Beneath the design tab, substitute the filter out approach to change the opacity of the button from 0% to 100% throughout the sticky state.

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

This will likely hide the button from view until the individual scrolls down the internet web page.

Final Result

To view the outcome, save the construction, assign the template to a internet web page in your site, and then save changes throughout the theme builder. Then open the internet web page that has been assigned the template.

Right here’s the outcome.

Sticky Header on Desktop

Sticky Header on Tablet

Sticky Header on Phone

Final Concepts

With Divi, you could have the luxury of considering mobile-first with regards to those sticky headers. We merely showed you the best way easy it’s to be able to upload a sticky header for cell the use of Divi’s built-in alternatives. In case you free up the facility of Divi’s sticky alternatives, you’ll get beautiful creative with the best way you transition the elements of the sticky header. You’ll be capable to invert the brand from delicate to dark with a filter out, make a button appear, or change all the background shade of the header. And that’s just the beginning. Feel free to experiment with additional customizations which can be suitable the desires of your next problem!

I stay up for paying attention to from you throughout the comments.

Cheers!

.inline-code{padding: 0px 4px; shade: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!very 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.

WordPress Web Design

[ continue ]

read more