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.

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

(01:16)

The section should have 3 columns.

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)

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)

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

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)

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)

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)

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 Z–Index 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.

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.