Only background color when header is sticky

woodyf4u

Hi,
I set the main menu header to Sticky on Top.
I gave that header a background color.
Now I actually want the header to only have a background color when scrolling and that no background is visible if the header is completely against the top when the site is opened.

So the header has no background color, but only when the page is scrolled down and the header remains stuck at the top.

Can this be configured using CSS?

Regards,
Wouter

saguaros

Hi Wouter,

To add style for an element when scrolling down the page, you can add style with this class: .not-at-top

For example:

.not-at-top .header-block {
/*your custom code*/
}

woodyf4u

Thank you very much.
That works great.
To see it clearly, I made the bar red when scrolling.
As a result, I see that the three menu items have a blue background.
I looked where I could use CSS to set those menu items to have a transparent background.
But I couldn't find that.
Could you also give me some good advice for that?

saguaros

woodyf4u It's due to your custom css:

.nav-breakpoint-lg .t4-megamenu {
    background: #589DD8;
}

Kindly review your code again.

woodyf4u

Thanks a lot for the code.
Topic solved.