Sticky Menu Transparent - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Sticky Menu Transparent

K

komir

Template 4 years ago

Hi how can make, with Helix ultimate v2 https://www.joomshaper.com/joomla-templates/helixultimate , when visitor is on top of the page main menu is transparent and when start to scroll it is become no-transparent, something like this template have https://www.joomshaper.com/joomla-templates/luxyort Thank you

0
Website
http://www.gradcontainer.com/
8 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #28886

Okay, I got you now. Please use this CSS to Template Options -> Custom Code -> Custom CSS

header#sp-header {
    position: absolute;
    background: transparent;
    box-shadow: initial;
    width: 100%;
}
#sp-header.header-sticky{
    background: #fff;
}
0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #28855

Hello komir

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-header.header-sticky{
    background: transparent;
}

Screenshot at Aug 20 15-44-04.png

Best regards

0
K
komir
Accepted Answer
4 years ago #28868

Thanky ou but with that code menu become transparent when user start to scroll and when is on top of the page it is not transparent. Need it reverse, when vistor is on the top of the page menu is transparent and when start to scroll menu become no-trasparent. Thank you

0
Joomla! Man
Joomla! Man
Accepted Answer
4 years ago #28873

Try add

#sp-header {
    background: transparent;
    position: absolute;
}

Thanks

0
K
komir
Accepted Answer
4 years ago #28875

Thank you I have add but no luck, still it is transparent when is on top http://irtap.radna.us/

0
Pavel
Pavel
Accepted Answer
4 years ago #28877 
#sp-header {
    background: rgba(255, 255, 255, 0);
    position: absolute;
    box-shadow: none;
}
#sp-header.header-sticky {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
}
0
K
komir
Accepted Answer
4 years ago #28878

Solved

#sp-header.header-sticky {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    animation: spFadeInDown 0.5s;
    background: whitesmoke;
}
#sp-header {
    background: transparent;
    position: absolute;
}
0
Joomla! Man
Joomla! Man
Accepted Answer
4 years ago #28883

remove 

   position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    animation: spFadeInDown 0.5s;

Select

https://prnt.sc/1qd1wqi

Thanks

0