Making menu sticky (but not the header image), and making menu opaque

[pablobernabeu]

Hello,

I would like to ask for help with a CSS addition to keep the menu items fixed on the top of the site, in a functional way. The site is: http://wp.lancs.ac.uk/prospr/

I’ve tried with the code from this site, namely:

.site-header {
position: fixed;
width: 100%;
z-index: 1000;
}

.main-content {
padding-top: 50px; /* adjust this to match the height of your header */
}

That almost worked. The problems were that:

(1) the header image was made ‘sticky’ too (covering up nearly the whole site),

(2) the menu was left transparent rather than opaque (thus the text in pages can be seen behind).

I would greatly appreciate any advice for these issues. Thanks a lot,

Pablo

[chirukan]

Hey, the code itself looks buggy.

Take out “position: fixed” to made header not sticky first of all.

One more simple advice from my side is that, change the menu location from header to secondary menu location like below to the header and above to the content, that will help you solve the issue I believe. You can check secondary menu location of this website (https://noxforpc.com/) just for an idea and please note that I haven’t made the menu sticky as I serve ads and that stick menu will cover the ads and that will create issues, So.

Thanks & Regards.
Chirukan.

[Author]

Posts