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.
@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 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.
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.
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.
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
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
Underneath the design tab, substitute the padding:
- Padding: 0px peak, 0px bottom
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
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.
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.
Underneath the design tab, give the image a max peak as follows:
- Max Most sensible: 67px (desktop), 45px (tablet and phone)
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.
Rising the Sticky State Emblem
To create the sticky state emblem, copy the image module with the logo we merely created.
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.
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.
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%
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
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.
Underneath the menu settings, select the menu you want to use and gives the menu a transparent background.
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)
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.
0 Comments