I would like to have a separate set of CSS classes that just apply just to the colors for sticky nav and sticky nav dropdown using Venture. It seems like some but not all of the navbar styles in the template are also applied to the sticky nav.

I am happy to include all of this in custom.css, but can you please offer some guidance on if/how I should target the proper classes just for sticky nav? I am happy with the existing classes for sticky nav height, spacing and text - I just want to use separate colors for sticky nav (as well as for sticky nav dropdown).

Thanks!

Do you have a link for your site?

Cheers
Paul

Hi Paul - thanks for your help!

Here's my early stages WIP site: paulorwig.net/j3/

I like the idea of having lower opacity in the dropdown for the full size navbar (so the slideshow images still show through). I also like lighter colors for the navbar links on top of the slideshow images. But some of those navbar color choices (for example hover or in the dropdown) don't work farther down the pages when the sticky nav is used.

Another example is I have all the following set to transparent in the template settings: Navbar Link Background Color, Navbar Link Hover Background Color, and Navbar Link Active Background. But in the sticky nav, there's a blue background instead of a transparent background.

I think what would help me the most is if you can give an example for how I should write custom CSS classes that would only target the sticky nav including dropdown.



Thanks again,

paul

Hi Pau,

I'd suggest playing with these styles to show they work for you

#navwrap.fixed .zen-menu-child a, #navwrap.fixed .zen-menu-child span.zen-menu-heading {color: red;}

#menu ul > li.active .zen-group > .zen-menu-heading, #menu ul > .zen-group > .zen-menu-heading {color: blue !important; background: #eee !important;}

#menu ul ul > li a, #menu ul ul > li .zen-menu-heading {color: blue;}

#menu ul>li.active .zen-group>a,#menu ul>li:hover .zen-group>a,#menu ul>li.active .zen-group>.zen-menu-heading,#menu ul>li:hover .zen-group>.zen-menu-heading{color:red !important;background:#2980b9 !important;box-shadow:4px 4px 0 rgba(0,0,0,0.05);margin-bottom:10px;border-radius:2px}

Just to clarify I've used horrible colours to see what areas to target

Cheers
Paul

Thank you Paul, that is exactly what I was looking for!

Best,

paul

No problem

Cheers
Paul

In case it might help others, these are the CSS classes that I added to custom.css to customize the colors in the Sticky Nav and the Sticky Nav Dropdown:

/* link color */
#navwrap.fixed a, #navwrap.fixed span.zen-menu-heading {
color: #bbbbbb;
}

/* active link color and background color */
#navwrap.fixed li.active > a, #navwrap.fixed li.active > .zen-menu-heading {
color: #333333;
background: none;
}

/* hover link color */
#navwrap.fixed a:hover, #navwrap.fixed span.zen-menu-heading:hover {
color: #2796e6 !important;
}

Thanks for taking the time to post your solution

Cheers
Paul