Transparent Menu Shaper Ultimate Template
NEROVIK
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
Pavel
Accepted AnswerReplace 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
Pavel
Accepted AnswerHi.
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
Accepted AnswerThanks 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
Accepted AnswerHi
Thanks for contcating us. Could you please give me your site URL so that I can check?
-Regards.