Solved Templates

Transparent menu Shaper ultimate template

Asked by NEROVIK 3 years ago Last activity 3 years ago

Hi,
I would like on frontpage (only) to get the main menu transparent (menu is sticky).
When menu is not sticky, that is to say when scrolling, I would like to have the menu with a background color.

How can I do this?

thanks

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

Replace it

/*from*/
.maclasse #sp-header.header-sticky {
background-color:transparent!important;
}
/*to*/
.maclasse #sp-header {
position: absolute;
width: 100%;
background-color: transparent;
}
.maclasse #sp-header.header-sticky {
background-color: rgba(255, 255, 255, 0.9) !important;
}

Note: space before !important is required

4 more replies

Oldest first Newest first Most helpful
Pavel
3 years ago

Hi.
First of all you should add your own page class name in menu item settings. This is necessary that changes are used only on a separate page.
Then if you will ispect header behavior via browser dev tools you will see that when scrolling, header-sticky class is adding to the header. You can use it in you custom css code to make what you want.

So, for before scrolling state, write code for .your-own-page-class #sp-header selector, for after scrolling state, write code for .your-own-page-class #sp-header.header-sticky selector.

NEROVIK Asked this
3 years ago

Thanks but it does not work.

Page class defined as you mentionned=>maclasse.

CSS :

#sp-header.header-sticky {
position: fixed;
top: 0;
box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}
#sp-header.header-sticky {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
animation: spFadeInDown 0.5s;
}
#sp-header {
top: 0px;
padding: 0px;
height: inherit;
box-shadow: none;
z-index: 9999;
background-color: rgba(255, 255, 255, 0.9);
}
.maclasse #sp-header.header-sticky {
background-color:transparent!important;
}

When I scroll down the page the navigation (menu) is transparent. I want the exact reverse.

Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contcating us. Could you please give me your site URL so that I can check?

-Regards.

NEROVIK Asked this
3 years ago

Génial. Many thanks

Log in to reply.