This question will probably go down in history as one of the most asked questions ever along side “Which theme is best for Elementor?” but that is for another time. Todays focus will be on transparent headers and the 2 methods I use constantly to make mine with Elementor.
Required Tools: Elementor Pro
Before we get too far ahead I am going to assume that if you are reading this you are a Elementor Pro user and are some what familiar with making headers & footers with Elementor. If not a recommend you take some time to check out the docs provided by Elementor.
So with that out of the way let’s begin.
Setting Things Up
To ensure we all get the same outcome I am going to share with you the templates I will be using so that by the time we are finish the outcomes will be the same.
For my page template I will be using this.
For my header I will just create something very basic that consists of just a 2 column section with a nav widget on the right and image widget on the left.
This is what your page should look like now with the template and basic header.
Transparent Header Method 1
For this first method we are going to be using a couple lines of code to assist our header.
Open up your Header with Elementor and adjust these section options.
Now for the CSS
The css we will be using will take the header out if its normal flow and allow the content to slide under.
selector {
position: absolute;
width: 100%;
top: 0px;
}Apply the css under the advanced tab in the custom css area. Things might look normal except the drag widget area has moved up a little.
Method 1 Result
This method can be problematic when editing other pages with Elementor because the header will overlap the first section and will require that you use the navigator to select the top most widgets.
This method is consistent no matter the size of the header and no measuring is required.
This is my preferred way of handling transparent headers.
Transparent Header Method 2
Method 2 is probably the most simplest way to handle a transparent header.
Its involves adjusting the bottom margin of that header so that the content goes under it.
Let’s Begin
Revert back to your original header if you started with method 1.
Next we need to figure out how much negative margin we need to add to our header.
I accomplish this by measuring the height of the header using shift+command+4 which allows me to get a close estimate of the height for a more accurate estimate you could use google dev tools.
My measurement came out to be 100px.
This method can give you the same look as the first if your math and measuring is good.
If not you could see some random whitespace from not applying enough negative margin either on tablet or mobile.
I hope this answered alot of your questions in a future article we will tackle transparent header that change color once they become sticky.
Stay tuned.
😀.
