More in this section

Forums / Bugs & Issues / Custom Design/CSS for navigation widget

Custom Design/CSS for navigation widget

3 posts, 1 answered
  1. Tobias
    Tobias avatar
    2 posts
    08 Aug 2014
    08 Aug 2014
    Link to this post


    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!


  2. Vassil Vassilev
     Vassil Vassilev avatar
    308 posts
    21 Jan 2015
    11 Aug 2014
    Link to this post
    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
  3. Tobias
    Tobias avatar
    2 posts
    08 Aug 2014
    12 Aug 2014 in reply to Vassil Vassilev
    Link to this post

    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,

3 posts, 1 answered