How to make MenuTransparent, thenbackground on scroll

Support
#1

I followed the guide here https://xthemetips.com/transparent-fixed-header/129/, but it didnt get me close to what I want.

I want a the fixed menu to have transparent background when at the top.
Then as the website is scrolled, the background becomes 50% transparent.

Thanks.

#2

Hi There,

Please try with this custom CSS:

.x-navbar {
    background-color: transparent;
    border: none !important;
    box-shadow: none;
}

.x-navbar.x-navbar-fixed-top {
    background-color: rgba(177, 177, 177, 0.75)
}

.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

Let us know how it goes!

1 Like
#3

Thanks a lot.

But the transparency works only on home page. Other pages fades as you scroll, but not when menu is at top.

Check www.cherofitness.com to see.

#4

Hi There,

Please change the previous CSS to this:

.x-navbar {
    background-color: transparent;
    border: none !important;
    box-shadow: none;
}

.x-navbar.x-navbar-fixed-top {
    background-color: rgba(177, 177, 177, 0.75)
}

.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

Hope it helps :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.