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.:
p
color
:
green
!important
;
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