Hi,

I have been looking through the forum and did not see the answer to this. I would like #navwrap to be #330033 and change to #000000 when the sticky nav takes over as I scroll down. I have tried all sorts of css combinations to achieve this but can't seem to get it right.

pinatel721.com/performance/index.php

Can you point me in the right direction?

Thanks,

Joanne

Hi Joanne,

Have you tried adjusting the sticky menu colours in the template settings?

Design tab on left > General settings > Style tab and scroll down for sticky menu settings

Cheers
Paul

Hey Paul,

Happy New Year from MA!

Yes, I've tried setting the background color there but as you can see from the attachments, the black doesn't apply to the #navwrap. I would like the whole purple bar to be black. Only the .zen-container shows black. I don't know what css to use to make the navwrap remain purple until you scroll down and the sticky nav is triggered. At which time, the navwrap turns black.

J

ok

Try

.zen-nav-fixed .zen-spotlight {background-color: #330033 !important;}

Cheers
Paul

On my computer (hosted Siteground -- cleared cache) it makes the navwrap #330033 all the time whether sticky or not.

I was looking for almost the opposite.

Is there a way to make the #330033 turn to #000000 when the sticky nav is triggered? As we scroll down? I'm sure I saw that on another template -- but maybe I'm crazy. Could be.

J

I've been looking through the templates and two do what I'm looking for: Venture and Hub2. I found this css in Hub2.

.affix {
top: 0;
width: 100%;
z-index: 1000;
left: 0;
padding: 0px;
position: fixed;
background: #121212;
}

Do I need to put a class called affix on my menu?

J

#navwrap.zen-nav-fixed {background: #000 !important;}

Try this instead

Cheers
Paul

Thanks! That worked!

J

Nice one

And of course Happy New year to you and your family

Cheers
Paul