Switching Your Brand on a Sticky Header in Divi

by | Nov 11, 2021 | Etcetera | 0 comments

When designing a sticky header for your internet website online, switching the logo can open up new design choices. For example, chances are high that you’ll wish to use a different background colour for the sticky header then again need a different emblem to make the design art work. Or, chances are high that you’ll need a different style of the logo that doesn’t stand out as so much and distract consumers.

In this tutorial, we’re going to show you the way you’ll be able to switch your emblem on a sticky header in Divi. The usage of the Divi theme builder, we’re going to build a brand spanking new header with two logos that switch when the patron engages the header’s sticky state.

Let’s get started!

Sneak Peek

Right here’s a quick check out the design we’ll assemble in this tutorial.

Download the Construction for FREE

To place your arms on the designs from this tutorial, you’ll first want to download it using the button beneath. To comprehend get right to use to the download you will need to subscribe to our Divi Day-to-day email file via using the form beneath. As a brand spanking new subscriber, you’ll download a lot more Divi goodness and a free Divi Construction pack each and every Monday! Whilst you’re already on the file, simply enter your email deal with beneath and click on on download. You’ll no longer be “resubscribed” or download additional emails.

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

Download For Free

See also  Use the Yoast Ecommerce search engine marketing Coaching Path to Building up On-line Gross sales

Download For Loose

Join the Divi E-newsletter and we will be able to email you a reproduction of the ultimate Divi Landing Internet web page Construction Pack, plus tons of various superb and free Divi resources, pointers and guidelines. Observe along and also you’ll be a Divi grab in no time. In the event you’re already subscribed simply type on your email deal with beneath and click on on download to get right to use the construction pack.

You will have successfully subscribed. Please take a look at your email deal with to ensure your subscription and get get right to use to free weekly Divi construction packs!

Import the Header 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 peak correct of the internet web page to import the JSON file.

switching-logo-on-sticky-header-in-divi

Let’s get to the learning, shall we?

Switching Your Emblem on a Sticky Header in Divi

Phase 1: Construction a New Header inside the Divi Theme Builder

For this tutorial, we’re going to build a brand spanking new header using the Theme Builder.

To do this, navigate to the Theme Builder.

Add a brand spanking new template and assign it to All Pages (or to a test internet web page). Then click on directly to assemble a brand spanking new header inside the new template.

switching-logo-on-sticky-header-in-divi

This will open the header template editor so we will be able to get began development the header from scratch.

Phase 2: Rising the Sticky Section and Row

Add Row

To kick problems off, move ahead and add a one-fourth three-fourths column row to the default not unusual segment.

switching-logo-on-sticky-header-in-divi

Section Settings

To make this a sticky header, we’re going to add a sticky position to the segment. Open the segment settings and, under the sophisticated tab, substitute the sticky position as follows:

  • Sticky Position: Stick to Easiest

switching-logo-on-sticky-header-in-divi

Underneath the content material subject material tab, add a background colour for the desktop and for the sticky state as follows:

  • Background Color (desktop): #f6f0e7
  • Background Color (sticky): #000000

switching-logo-on-sticky-header-in-divi

Underneath the design tab, substitute the padding:

  • Padding: 0px peak, 0px bottom
See also  How you can In finding the Maximum Essential Web page of Your WordPress Web site

switching-logo-on-sticky-header-in-divi

Row Settings

Now that the segment is complete, we’re ready to interchange the row settings. Open the settings for the row and substitute the following design settings:

  • Gutter Width: 1
  • Width: 96%
  • Padding: 10px peak, 10px bottom

switching-logo-on-sticky-header-in-divi

Phase 3: Together with the Switching Emblems

So as to create the switching emblem affect each time the header is inside the sticky state, we’re going to create two images that slide in and out of view. The principle emblem can be displayed to begin with and then a brand spanking new sticky state emblem will slide into view once the patron scrolls down the internet web page

Rising the Primary Emblem

To create the main emblem, add a brand spanking new image module to the left column.

switching-logo-on-sticky-header-in-divi

Upload a symbol image to the module (spherical 200px via 67px). You’ll have the ability to moreover add a dynamic link to the homepage as neatly.

switching-logo-on-sticky-header-in-divi

Underneath the design tab, give the image a max peak as follows:

  • Max Most sensible: 67px (desktop), 45px (tablet and phone)

switching-logo-on-sticky-header-in-divi

Then substitute the following grow to be translate risk inside the sticky state:

  • Turn out to be Translate Y-axis (sticky): -100%

This will switch the logo up outdoor of the column to hide it from view inside the sticky state.

switching-logo-on-sticky-header-in-divi

Rising the Sticky State Emblem

To create the sticky state emblem, copy the image module with the logo we merely created.

switching-logo-on-sticky-header-in-divi

Open the settings of the copy image module and upload a brand spanking new emblem image (the one you want to show inside the sticky state. For best possible results, the logo must be the identical size.

switching-logo-on-sticky-header-in-divi

Underneath the sophisticated tab, give the image an absolute position.

  • Position: Absolute

The brand must now sit down immediately on peak of the main emblem.

switching-logo-on-sticky-header-in-divi

Underneath the design tab, substitute the grow to be possible choices as follows:

  • Turn out to be Translate Y Axis (desktop): 100%
  • Turn out to be Translate Y Axis (sticky): 0%

switching-logo-on-sticky-header-in-divi

This will make the logo sit down beneath the main emblem image to begin with and then slide up into place as quickly because the header is inside the sticky state.

Phase 4: Alternate Column Overflow to Hidden

Lately, the sticky state emblem will keep visible outdoor of the column. To change this, we want to substitute the overflow visibility of the column as follows:

  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden
See also  WooCommerce Permalinks: Best possible Practices for Stores and Merchandise

switching-logo-on-sticky-header-in-divi

The Result

At this stage, the switching emblem capacity is in place. Right here’s a preview of the switching logos.

Phase 5: Rising the Menu

To finish off the design, we want to add a menu to the header. To do this, add a brand spanking new menu module to the appropriate column of the row.

switching-logo-on-sticky-header-in-divi

Underneath the menu settings, select the menu you want to use and gives the menu a transparent background.

switching-logo-on-sticky-header-in-divi

Underneath the design tab, substitute the following:

  • Menu Font: Roboto
  • Menu Font Weight: Bold
  • Menu Text Color: #000 (desktop), #fff (sticky)
  • Menu Text Dimension: 18px
  • Menu Line Most sensible: 1.3em
  • Text Alignment: correct
  • Dropdown Menu Background Color: #fff
  • Dropdown Menu Line Color: #000
  • Dropdown Menu Text Color: #000 (desktop), #000 (sticky)
  • Mobile Menu Background Color: #fff
  • Mobile Menu Text Color: #000 (desktop), #000 (sticky)
  • Hamburger Menu Icon Color: #000 (desktop), #fff (sticky)
  • Margin (desktop): 14px peak
  • Margin (tablet and phone): 5px peak
  • Padding (tablet and phone) 5px bottom
  • Rounded Corners: 3px
  • Border Width (tablet and phone): 1px
  • Border Color : #ddd (desktop), #333 (sticky)

switching-logo-on-sticky-header-in-divi

Final Result

Final Concepts

With Divi, you don’t wish to keep the identical emblem to your sticky headers. We merely showed you the way in which easy it’s to do using Divi’s built-in possible choices. No additional code is sought after. In the event you liberate the power of Divi’s sticky possible choices, you’ll have the ability to get gorgeous creative with the way in which you transition the logos in and out of view. Expectantly, this little trick will change into helpful for your next enterprise!

I sit down up for being attentive to from you inside the comments.

Cheers!

.inline-code{padding: 0px 4px; colour: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!crucial} 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 Switching Your Logo on a Sticky Header in Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment