EDIT: Nevermind, I just had to turn "on" the option on the customisation menu. Thanks!! Same here, the one in the video didn't work but this one did. It only worked on the home page, though. Any idea of how to make it work on the other pages/ blog posts? Thanks so much!!
This won't work on a transparent header. In which case you want something like this instead: #masthead { z-index: 10; position: fixed !important; width: 100%; } But thanks for the info! starts @5:11 .site-header { position: fixed; top: 0; width: 100%; }
Ok so if you want your header to be transparent initially and turn solid color when scrolled down i figured this code after 2 hours: #masthead { position: fixed !important; width: 100%; z-index: 9999; transition: background-color 0.3s ease, border-bottom 0.3s ease; } .sticky-header { background-color: #ffffff; border-bottom: 1px solid black; }
Thanks man !!! Really helpful. Tho, the image i had just after the menu. It did lose some space. Weird... How did u acces the responsive window so fast in your browser (at 7:09 min) ???
This is very good it works with all the pages but it doesn't work with the home page. I believe because the home page header is set as transparent. So maybe there should be some particular instruction for transparent header? Any suggestion or recommendation? thanks
My dear friend I have a suggestion for you if you can transcribe what so ever you have to say it will be nice.,.also now you can choose your transcribe text into a voice with someone who does not have an accent So transcribe plus voice AI will give you a clear video …if you choose female AI voice you will have more. Viewers …but in San Francisco it different they like boys voice also…!!!
![[FREE] How to Create Transparent Sticky Header in WordPress with Elementor](/img/n.gif)
I used div#page header#masthead {
position: fixed;
top:0;
width: 100%;
}
CSS from video didn't work....but yours "div#page header#masthead" did the trick! Thank you Tony
EDIT: Nevermind, I just had to turn "on" the option on the customisation menu. Thanks!!
Same here, the one in the video didn't work but this one did. It only worked on the home page, though. Any idea of how to make it work on the other pages/ blog posts? Thanks so much!!
Css from video didnt worked but your tag worrked thank u buddy u r great
You saved my life Tony, i will be gratefull to you for all my life. Thank you
thanks it worked perfectly
This won't work on a transparent header.
In which case you want something like this instead:
#masthead {
z-index: 10;
position: fixed !important;
width: 100%;
}
But thanks for the info! starts @5:11
.site-header {
position: fixed;
top: 0;
width: 100%;
}
Thank you thank you thank you ! ;-)
This guy, for the win! Thanks
Thank you so much for this.
THANK YOU!!!
Thank you CRACK!!
Ok so if you want your header to be transparent initially and turn solid color when scrolled down i figured this code after 2 hours:
#masthead {
position: fixed !important;
width: 100%;
z-index: 9999;
transition: background-color 0.3s ease, border-bottom 0.3s ease;
}
.sticky-header {
background-color: #ffffff;
border-bottom: 1px solid black;
}
Thanks man !!! Really helpful. Tho, the image i had just after the menu. It did lose some space. Weird... How did u acces the responsive window so fast in your browser (at 7:09 min) ???
This is very good it works with all the pages but it doesn't work with the home page. I believe because the home page header is set as transparent. So maybe there should be some particular instruction for transparent header? Any suggestion or recommendation? thanks
HI ! the same here
Fatafati Dada, You rock , thanks a million...
Dada, how to make an impressive footers on website..
Hello, it works like sticky yes, but it scrolls down above the content and does not stick.
seems like this no longer works with new Astra updates
Thank you. It worked flawlessly 🎉
2024-I have tried this and it works. Thank you for the css code.
Hello Rbn! Very informative and helpful! Thanks! Keep doing!😊
Your videos so informative !!! Great explaining!!!!
Nice sharing
Thank you for great video but how did you know the CSS element name?
As in how did you get the css class for the header you use?
And in the end your idea worked for me ❤
hello, this isnt working for me for some reason. any ideas?
Unico tutorial serio e utile! grazie!!!! non parlo bene inglese e comunque ci sono riuscita :) grazie
Great share on how to create sticky headers!
Very good. Happy Birthday !
Great tutorial. Thanks a lot.
❤️❤️❤️❤️
This is really helpful. Thank you so much 😊
Thank you for the information. I subscribed
HI RBN, your videos are always so informative. Great explaining for people who need problems solved 👍 ~ Anna
My Dear New FRIEND Hello To You
Wonderful Video
Greetings From ISTANBUL
Not working in starter templates
Obrigada por dividir conosco o seu conhecimento 👏
Don't use this method. It's not adapted
Parabéns pelo seu lindo trabalho, sucessos sempre
Hi! This css code is not working.
Thank you.
Hello RBN, great content as always, useful and informative, well explained, thanks for sharing 👍👌
too bad you didn’t add the code in your description
Great tutorial,im not really good at this
Great info thanks!
Thank you for sharing friend
not working for me
Hello sir, how are you, long time no see
Good job. Thanks.
Soo where's the code ?
thank you, it works!
My dear friend I have a suggestion for you if you can transcribe what so ever you have to say it will be nice.,.also now you can choose your transcribe text into a voice with someone who does not have an accent
So transcribe plus voice AI will give you a clear video …if you choose female AI voice you will have more. Viewers …but in San Francisco it different they like boys voice also…!!!
work thax
Bro you spoke too much just start the work straight
You are the best
Subscribe 🙂