How to make a Sticky Menu or Header in WordPress (3 best methods)

Рет қаралды 24,166

Күн бұрын

I'll show you how to easily add a sticky header, sticky menu or sticky navigation to ANY WordPress theme. There are 3 methods, and they all work great.
Sticky navigation can be a great addition to your website. It creates a better UX for your visitors and helps them quickly find other information on your site.
And while many themes now include a sticky menu feature, not all do. This is especially true of free themes. Fortunately, there are several plugins that can add fixed menu functionality in a few clicks. Or you can achieve the same thing with pure CSS.
I'll even show you how to fix annoyances like the admin bar overlapping your header, or anchor links that get hidden when you scroll to them.
**************************************
Video Sections
**************************************
0:00 - intro, and sticky header options
0:30 - How to make sticky navigation in GeneratePress theme
1:04 - Sticky menu w/ CSS (no Javascript required)
2:20 - Adding Z-index
2:34 - Fix admin bar overlapping fixed navigation
2:55 - Responsive media query (breakpoint)
3:25 - Sticky menu Plugins
3:45 - Setup 'My Sticky Menu' plugin
5:10 - add offset for Jump/Anchor links
5:40 - Outro & next steps
#wordpress #stickymenu

Пікірлер: 25

@thorewessels1604 Жыл бұрын

Thank you! Exactly what I searched for :)

@ngandacinema 2 жыл бұрын

THANKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK YOUUUUUUUUUUUUUUUU!!! can't tell you how I have been struggling to fix this problem for weeks now, going through different articles online that were just misleading and confusing. You are a blessing!!!

@unsinfullydelicious7889 5 ай бұрын

Thank you. This was REALLY helpful!

@Entropy8 Жыл бұрын

Thank you! That was awesome!

@ojuroungbequadri3915 2 жыл бұрын

keep it up, you are the best brr

@annaheisl196 Жыл бұрын

Amazing! Thank you so much! :)

@dipanjanghosal1662 2 жыл бұрын

Thank you man!

@monadamon6960 10 ай бұрын

Thanks a lot! Love you!

@ImamSuharjo1 2 жыл бұрын

Thank You..

@surajdigital4859 2 жыл бұрын

Thanks

@Carritube 2 жыл бұрын

this was super helpful thank you, how do I disable the sticky menu on desktop? my website has a side navigation and i only need sticky menu on mobile, how do I go about doing that?

@BuildThatWebsite 2 жыл бұрын

You can use the CSS media query method as shown in the video or the 'disable on screen width' option in the plugin. I can't remember, but the plugin's width controls might only allow disabling it on small screens, not enable-only on small screens in which case you might need to upgrade to pro.

@letterpool Ай бұрын

my template already has a left side menu, how do I also ad a top menu... when I followed this it edited the left menu I already had

@lenaeugene6388 3 жыл бұрын

Hi, I'll buy your "How to build a WordPress theme and learn PHP while doing it" tutorial :)

@BuildThatWebsite 3 жыл бұрын

To be honest I'm still very much learning PHP myself, and have only recently started building basic plugins for my sites. I highly recommend the Codeacademy PHP course (free) for the very basics: www.codecademy.com/learn/learn-php For theme building, maybe try this series from Allesandro Castellani. I watched his WordPress plugin tutorial and it was excellent: kzfaq.info/sun/PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX

@Jakir_USA 10 ай бұрын

Unfortunately this did not work with my Astra theme :(

@repairmotor6579 Жыл бұрын

hi, I've got a problem after doing this. on the mobile screen, the menu will pop up from the left and when I click any part of this section it will close the menu by itself this is my code #masthead { background:#ffff; height:70px; z-index:999; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; }

@milanvladetic3375 11 ай бұрын

Hello, I can't find the header ID in script. How can I turn it on to be shown? Thanx

@milanvladetic3375 11 ай бұрын

I've managed to find it. Have one another question. I've a made a Menu with Elementor "Elementor Header & Footer Builder". Is it possible to it with this kind of menu? I have a #masthead ID and have typed it correctly, but something is off. If you could help, I would appreciate that. Thanx

@BuildThatWebsite 11 ай бұрын

Do you have a live website I could check?