Wordpress 2020 Theme How To Make A Fixed Position Sticky Header

You earned a subscriber

Thank you so much for the video. It helped me a lot. Good described. Appreciate!

Hii, thanks for the amazin script..

im trying on the other hand to have a transparent nav header and when scrolling the background changes to black...
i used the following script. but it just makes the background black the whole time.. when its fixed and when its scrolling.

is there soemthing that im missing?
would be thrilled if someone assists.
Thanks


.main-header-bar {
position: fixed;
top: 0px;
padding: 5px 0;
width: 100%;
height: 90px;
background-color: transparent;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
z-index:1000 !important;
}


.main-header-bar {
position: scroll;
top: 0;
left: 0;
width: 100%;
z-index: 999 !important; transition: all 0.4s ease-in-out;
background-color:rgba(0, 0, 0,.8) !important;
}

Thanks A LOT

Thanks. But make position fixed, will block some of the contents in the top area. How should I do?

Thank you for the Fixed Menu code, it works great. I'm using the new install of WordPress 5.7 theme 2020. I added the code and the menu looks great, but the TO THE TOP icon at the bottom of the page to go back to UP " STOPS WORKING". could you find the fix for this? added to the code you already shared? it would be great to have both features work and I have no idea where to look. I will subscribe to your channel and hope you read your comments. Thank you for looking into this in advance :)

Now, this is better than adding new plugins that will bloat your site.

You're the best!

Very informative vedio..

Thanks. Quicker and easier than trying to figure out how to do it in WordPress

Thank You so much, I really appreciate your efforts

Thank you so much 👍
I just subscribed to you channels

OMG, thank you so much. Tried a lot of other things with css and also JavaScript, but the answer to this problem is super simple! Thank you!

Hey thanks for that video it also was mindblowing for me! But I have one problem now.. my Logo is now in the middle since I coded it like that and I dont know why or how to bring my logo at the header again.. could you maybe help me?

Amazing! One question though. I can't see the wordpress ribon when I log in. The one you wanted to hide when you opened the website on the incognito mode so you could check what other people would see. I have a black header, and the header isn't built on elementor, but a regular wordpress header. Thank you for the help

Thank you! Super!

Do you need elementor pro? Because it didn't work at all. everything just stays normal. As if I didn't do anything. Refreshed the page and all

Thank you so much! Been struggling with it for hours till found your video. Subscribed :)

I tried this in December 2020 and didn't work originally as described. However, I went to inspect element on the header like in the video and searched for a name how the header was described differently than "site-header". Mine was "main-header-bar" and after I replaced it, it worked perfectly fine like shows in the video. Thanks for everything!

It's not clear