How to Create a Sticky Transparent Header, Change Logo & Background Color on Scroll in Elementor [PRO]

Have you ever wanted to create a sticky transparent header in Elementor where your website logo and background colour change on scroll? If yes, then this is the tutorial for you. I’ll show you step by step how to create your header and add all the styles and tweaks to make it sticky and transparent, as well as responsive on mobile devices.

8 WNYJIxZdrYgPb2DfsNf0cUw8ATsVDjPjRNSaIwgxRwTQ9ADAW2HdHzr9QAd1USRkTtCaWnn70iGhUSCwauVTqH3o7o3ilFJrY4MCLEMDbywPo

What you’ll need

All you’ll need for this tutorial is Elementor Pro, and we’ll use some custom CSS to get your logo and background color change on scroll.

Note: The digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video

Creating a Header in Elementor

To get started, open up your Elementor dashboard and go to Templates. Under templates select Theme Builder. When the theme builder opens up, go to the left and select the Header option. In the upper corner on the right click the Add New button to create a new header (close the Library popup if it comes). In the editor that opens up you now need to add a new section

9FIb ZWmdG7SI0DVOhvikK UfvelchtSS7SnSeA4 LK0yI6dP3VUEy UlM0TDuVHWJ2oZ2zwKcHl2U3NRPJSGjOw2HDb DlhkyFK0ZS2Gj 7 bvlmbmJB eAawAJTVO5iNfIjV6

(01:16)

The section should have 3 columns.

BN N6hI17Ado pz4mrzHED5Efe3XLmwylC8hegO vlaV1ukzyyZsfeDbwKqh

Now, select the section you just created, in the Edit Section area on the left, under Layout, go to the Height option and select Min Height from the dropdown (that’s minimum height) and make it 100 pixels, you can do that by typing in the figure or just moving the nob.

Next, go to Style, under Background Type choose Classic, then choose a Background Color.

Click the widgets icon (01:40)

w51zerp2x9YgsY3Yc6v6TQqxuwE58l4iHxryiknCYiiSO7eFUJ3bxwZf6j8kpPbI4rzGt316U2j3lwi9 RB O0ynEZWlvDlCpOsNhNatPY9SmPTY tqL1afSgzsjAf17s509ez5e

Under Basic section drag and drop the Heading widget to the first column in your section, then give it a title under Title, this will be for the Logo. 

Next step is to search for the Social Icons widget and drag it to the second column. 

And lastly,  find the Nav Widget and drag it to the third column, this is for the navigation.

Select the Heading widget and in the Edit Heading area on the left, under Content go to HTML Tag and change it to H1, then go under Style ; choose text color white. Then go to Typography and choose the font “Fugaz One”,  change font weight to 700, under Transform change to Uppercase, and make the font size 50 pixels.

Select the Social media icons widget next; go to Style and change size to 15px, change color to custom. Click the Icon Hover option, make Primary color white and Secondary color black, then hover animation Shrink. Under Advanced, go to the border, choose dashed border for border type, give it Width 1px on the left and color white; this will give a white border on the left side of the icons widget. Go back to Content and under Alignment choose left. Under Shape choose Circle and leave Columns on auto.

Under the Social Icons option you can add any social media platform you want by clicking on the Add Item option then select the icon library, choose the platform you want and insert it. You can also link those social media icons to your social media platform; by clicking on the icon, then under the link you can type in or paste your URL.

Select the navigation widget; under Content go to Menu and select Main Menu. This main menu is one you should’ve created under the Appearance section of your WordPress site.

To create a Main Menu press CTRL/CMD+E and in the Finder type in Menu to go to the Menus area (04:19)

dG 0t1c4le17n5ITTHg9iv8GRvAoVOqF52mXp9b4XIrM8R7rfVlPSrkrkSeuvmxdvrG87SY9r9rWNDuafW9h5XpGg8Ki9s8bCeJclL5qE

In the Menus area you are able to create a new menu or edit the existing menu by adding or removing items, when you’re done, save the menu and head back to your Elementor and select that Main Menu.

Under Layout, select horizontal and under Align choose left. Down on the Breakpoint option under Mobile dropdown, choose Tablet 1024px. Under Align; select Aside and under Toggle align choose Right

Next, go to Style and under Typography select Fugaz One font, size 22px, on Transform choose uppercase. Make it text color white, and increase the column size of the Nav widget. You can also increase the size of the other columns. 

Still under the Style settings of the Nav widget, go to the Hover option and change the text color to your preference, go to Active and do the same.

There’s no need for a pointer in the Nav widget so to remove it go to Content, under the Pointer option set it to None.

You can also make custom changes to the Dropdown and Toggle button.

Elementor Header Responsive Settings

To make changes to your Toggle button; go to the Responsive Mode icon at the bottom left, choose the tablet device and under the toggle button color, set it to white and make the background color transparent.

Select the first column and under Layout increase its size to 30% so that the logo is visible. Give the social media section 20% and the nav widget 50%.

You can also add some padding on the logo by selecting the heading widget, go to Advanced, unlink the values then on the left add EM 1. (07:24)

Also Read: How to Display Elementor Slider from Templates

YhcVPMQgB1yHLqK8BlsFUG9 M2B61j1D9LZdKu8wSaG pufYV7G2aSfKXPGuN09wpk8

Choose the mobile device now, under Typography (in the Style area) change to 25 instead of 50. Then under Content change Alignment to center, then select the other 2 columns’ width to take 50%.

Still on mobile device go to Advanced, under Positioning set Horizontal orientation to 0 and the Vertical to -8.

Select the social media icons column and go to Padding under advanced, select EM and add 4 on the left and bottom 1.

Select the Nav widget column; go to Advanced and select EM and add 4 for the right. (08:22)

HUH90frZmkFkXnJsXrmW4k9T2Cf1pfiTOUdTAH2bw148ETLIp9efa

Exit the responsive mode.

Back to your Elementor editor, at the bottom click the green Publish button and in the publish settings window that pops up, select Add Condition to display on the entire website, then save and close. Reload your website and your header is ready!

Sticky Transparent Header in Elementor

For the next part of this exercise you need to make your header sticky and transparent as well as change logo and color on scroll.

For this you first need to add another logo; the one that will show when someone scrolls. 

First, select your heading widget and on the right click duplicate (09:02)

HJCHiGcBc GP kZr0 mf4ZwjBIQMxsyF7kcH4Dg1wJ z1pZr

Rename the first logo as white logo and the second and gradient logo.

To give the second logo a gradient:

Select it and go to Advanced, go down and click Custom CSS option. Here is where you paste you gradient code (09:31)

iwqHwpgcYSLk34WXtqoL 8DQ5XQXDUXbVSw6rrrw2evhlWOCcpauu9rTRYX7IyNwsu8N1KQkTunwstGjOCfou3XRcBFubQZtkheL31OmQkv ghssJlLf7L7Y8Sj0ITQ NHDiWSKA

In this code, the gradient is supposed to work as a background color, but here it is masked and it’s going to work as a text color instead.

Gradient Logo CSS

.gradient-logo {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

So, copy the class in the code; that’s that first line of code “gradient-code”, go to Advanced and paste it under CSS Classes (without the dot).

At this point, you need to reposition your logos so that by default it’s only the white logo that shows up, and the gradient logo shows up when the heading starts to get sticky. To do this:

Select the white logo, go to Advanced and under Positioning, change its position to absolute, Horizontal align it to the right, under offset set to -10, for vertical set it to align to bottom and set offset to -15. 

Still under the white logo’s Advanced setting, go to Z-Index and set it to 2.

Select the gradient logo next and in Advanced set its ZIndex to 1.

This is how the white logo gets to be on top of the gradient logo. If for example the gradient logo Z-Index was higher, like a 3, it would be on top of the white instead.

Adding Sticky Header Effects

To add sticky effects to the header and go to Advanced and under Motion Effects, go to Sticky and set it to Top. on the Sticky On option you can add or remove different devices where you want the sticky header to appear. On the Offset Effects option set it to 350px, this tells the header to show the sticky effects after 350px of scrolling. Under Entrance Animation choose fade in and duration normal.

Down on the Custom CSS option, paste the CSS snippet to enable a different background when header gets sticky, to hide the white logo and to show the gradient logo when header gets sticky.(11:48) For this you have to add a class for the white logo and one for the gradient logo.

ZgvW kQQE1vpqZW2jvpaKvxKYDjw0f4gPKfNUAdVx4oiHyKYdjdM5IUUIsIMjaFLVwdxpC6uhqHfA5wSyRS6Q8ZwQ1zlK2YBLqZROB

Sticky Header CSS

/*Change sticky header background-color*/
selector.elementor-sticky--effects{
   background-color:#B83F2EF5;
   transition: .4s all ease-in-out;
}
 
/*Hide white logo on header turns sticky*/
selector .white-logo {
    display: inline-block;
}
selector.elementor-sticky--effects .white-logo{
    display: none;
}
 
/*Show gradient logo on header turns sticky*/
selector .gradient-logo {
    display: none;
}
selector.elementor-sticky--effects .gradient-logo{
    display: inline-block
}

Select the white logo, go to Advanced and under CSS Class paste “white-logo”. And then select the gradient logo and under Advanced paste “gradient-logo” under CSS Class. 

Remember: you copy these classes from the snippet, and you paste them without the dot.

Now update and reload the page to preview changes.

Now you have your sticky transparent header fully functional and it changes the logo and the background after 350 pixels of scrolling.

For any comments or questions let me know in the comments section below. And please subscribe to the youtube channel and to my newsletter for more tutorials.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *