Making menu sticky but not the whole header

[Noelle567]

I was hoping to get some css help please. The menu below the title area (7 items) needs to be sticky upon scrolling down the page but I don't want the whole header (containing logo and top menu) to be sticky as it takes up too much space. How can I do this please?

http://new.gcmgroup.ie

[Victor Font]

To make anything sticky, add position: fixed; to its CSS, which in your case is .nav-primary.

When you do that, it will make the menu fixed, but it also clears the background and the menu will sit squarely over any content you have on the page as you scroll down.

What I suggest is moving the menu to the before header area so it sits at the top of the page. You'll have to create all of the CSS required to center the menu, provide a background color, etc.

You'll also have to adjust the top margin for the header area so it doesn't sit under the menu. Anything with a fixed position will site above (front most position front to back) any element without a fixed position. You're creating a lot of work for yourself.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts