Custom Design/CSS for navigation widget

Hi!

I am a bit desperate here. After searching a lot I still can't find the solution to my problem: I am using a custom layout theme for my page template based on the default CSS Layout files which are created by sitefinity thunder Visual Studio Plugin. In the default Layout.css I customized the following navigation CSS classes to apply my desired style: 

.sfNavHorizontal li
.sfNavHorizontal a
.sfNavHorizontal a:hover
.sfNavHorizontal a.sfSel 
.sfNavHorizontal a.sfSel:hover

So that worked perfectly. I am now at the point where I need to style a second navigation bar which looks a bit different compared to the previous one. That’s where I am struggling now: 

I defined a custom CSS Class for the second navigation widget under Edit --> CSS Class with the name “customNav”. I tried to extend my CSS main file with the following classes for example:

.RadTabStrip_ customNav li
.sfNavHorizontal_ customNav li

Nothing worked - my second NAV looks exactly the same like the first one. In my compiled html I found in the outer DIV of the second navigation the following CSS class:

“class="sfNavWrp sfNavHorizontalWrp customNav ASP.sfctrlpresentation_openaccessdataprovider_e9d6df8e844e6470b1a3ff0000a6e005_ascx"

My approach based on that link, which describes exactly what I am looking for:
www.sitefinity.com/.../style-the-navigation-widget

Do I miss something? I would really appreciate it if someone can give me a hint!

Thanks!
Tobias

Hello Tobias,

It looks like your styles are overridden, so I believe by adding !important should apply your styles, e.g.:
 

Hi Vassil!

Thanks for your replay! I was able to solve the problem by just renaming my newly added CSS classes to:

.customNav li
.customNav a
.customNav a:hover
...

It was just a little naming problem :):

Kind regards,
Tobias