Create Sticky or Fixed Header in Astra Free Theme in 2022 | Sticky Menu in Astra Free Version

Create Sticky or Fixed Header in Astra Free Theme in 2022 | Sticky Menu in Astra Free Version.
// Best hosting for WordPress Website: partners.hostg...

[@tmach1000]

I used div#page header#masthead {
position: fixed;
top:0;
width: 100%;
}

[@PoNiCoN]

CSS from video didn't work....but yours "div#page header#masthead" did the trick! Thank you Tony

[@catabeltran]

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!!

[@tausifkokate]

Css from video didnt worked but your tag worrked thank u buddy u r great

[@ktrizolio]

You saved my life Tony, i will be gratefull to you for all my life. Thank you

[@BotsheloIkaneng]

thanks it worked perfectly

[@thegrowtheffect]

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%;
}

[@DianeP]

Thank you thank you thank you ! ;-)

[@j3wpb]

This guy, for the win! Thanks

[@constanceamatey8768]

Thank you so much for this.

[@Pstro_art]

THANK YOU!!!

[@carloscodling5084]

Thank you CRACK!!

[@JohanzY]

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;
}

[@wanderingjean8593]

Hello Rbn! Very informative and helpful! Thanks! Keep doing!😊

[@WhereToNextDad]

Your videos so informative !!! Great explaining!!!!

[@FXWalesAnnaAlf]

HI RBN, your videos are always so informative. Great explaining for people who need problems solved 👍 ~ Anna

[@sayhiby163]

Nice sharing

[@sjamjourneys1]

Hello RBN, great content as always, useful and informative, well explained, thanks for sharing 👍👌

[@malarviliepunnanpalam4772]

2024-I have tried this and it works. Thank you for the css code.

[@riccardovarrazza6979]

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

[@LinaStalyte]

HI ! the same here

[@Seedhe-Saadhe-Akshay-Akshay]

Fatafati Dada, You rock , thanks a million...
Dada, how to make an impressive footers on website..

[@RohailAKSPK]

Thank you. It worked flawlessly 🎉

[@PinoyintheREZUSA]

Great share on how to create sticky headers!

[@emanuellabarbosadasilva198]

Parabéns pelo seu lindo trabalho, sucessos sempre

[@dicastopdajuju5073]

Obrigada por dividir conosco o seu conhecimento 👏

[@SmartV1307]

Very good. Happy Birthday !

[@alicemartemucci-y7f]

Unico tutorial serio e utile! grazie!!!! non parlo bene inglese e comunque ci sono riuscita :) grazie

[@TastyFoodTour]

My Dear New FRIEND Hello To You
Wonderful Video
Greetings From ISTANBUL

[@singforsukoon6618]

And in the end your idea worked for me ❤

[@sarwarjahanbhuiyan3147]

Great tutorial. Thanks a lot.

[@RbnWebSolutions]

❤️❤️❤️❤️

[@SameerKhan-ju1xz]

This is really helpful. Thank you so much 😊

[@tmach1000]

Thank you for the information. I subscribed

[@TrueColorsss808]

Great info thanks!

[@JasperHunt-hq7pu]

seems like this no longer works with new Astra updates

[@henrytourumengkor]

Thank you for sharing friend

[@Nosfeicon]

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) ???

[@dingssimpleliving5911]

Great tutorial,im not really good at this

[@syedanezunakther3855]

Thank you.

[@orzysz_info]

Good job. Thanks.

[@windiparadita6505]

thank you, it works!

[@anselsolomon6270]

Thank you for great video but how did you know the CSS element name?

[@anselsolomon6270]

As in how did you get the css class for the header you use?

[@BandUnik]

Hello sir, how are you, long time no see

[@fsan2val]

Hello, it works like sticky yes, but it scrolls down above the content and does not stick.

[@24hit]

Don't use this method. It's not adapted

[@kemasanpack-q7m]

work thax

[@jjmovingsolutions]

hello, this isnt working for me for some reason. any ideas?

[@divyasriconsultancyservices]

Not working in starter templates

[@orental5996]

too bad you didn’t add the code in your description

[@Ms-tv]

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…!!!

[@amiranoreenofficial5900]

Hi! This css code is not working.

[@farazisgreat]

not working for me

[@goodenrecords8666]

Soo where's the code ?

[@alexanderabr5940]

You are the best

[@RbnWebSolutions]

Subscribe 🙂

[@kingbadel2023]

Bro you spoke too much just start the work straight