Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

SOLVED: Separate CSS for sticky nav?

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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!
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 6 years 5 months ago by porwig.
The administrator has disabled public write access.
Do you have a link for your site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig
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
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 6 years 6 months ago by porwig.
The administrator has disabled public write access.
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}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Just to clarify I've used horrible colours to see what areas to target :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig
Thank you Paul, that is exactly what I was looking for!

Best,

paul
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
No problem :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig
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;
}
  • porwig's Avatar
  • porwig
  • 12 Month Developer
  • 143 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
The following user(s) said Thank You: manh
Thanks for taking the time to post your solution :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: porwig

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers