Custom Design/CSS for navigation widget

Posted by Community Admin on 04-Aug-2018 12:08

Custom Design/CSS for navigation widget

All Replies

Posted by Community Admin on 08-Aug-2014 00:00


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:

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


Posted by Community Admin on 11-Aug-2014 00:00

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;

Is the above a possible option and are the styles applied?

Vassil Vassilev
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

Posted by Community Admin on 12-Aug-2014 00:00

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,

This thread is closed