+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Selectors for only the first level of dropdown nav?

Selectors for only the first level of dropdown nav?

2 posts, 0 answered
  1. Nik
    Nik avatar
    10 posts
    Registered:
    06 May 2013
    03 Oct 2013
    Link to this post
    I have the following class adding an 'up-arrow' to the top of the pop-up nav pointing to the parent group/page name...
    .headermainnav .sfNavHorizontalDropDown ul.k-popup li:first-child:before {
                border-bottom: 9px solid #DBDEE4;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 1px solid transparent;
                content: " ";
                height: 0;
                margin-top: -9px;
                position: absolute;
                left: 52%;
                top: 0px;
                width: 0;
            }

    But it's also adding it to the popup of any 3rd level nav items. How can I restrict this css to just the 2nd nav level?
  2. Ivan D. Dimitrov
    Ivan D. Dimitrov avatar
    310 posts
    Registered:
    26 Mar 2015
    08 Oct 2013
    Link to this post
    Hello Nikolei,

     The reason why this happens is because Sitefinity Navigation uses the same classes for the divs and spans that wrap the individual pages. In order to change either the classes or the IDs if the navigation tabs you can go to Design->Widget Tenplates and either modify the existing widgets there or create a brand new one. That way you can style your navigation to your liking.

    Regards,
    Ivan D. Dimitrov
    Telerik
    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 Public Issue Tracking system and vote to affect the priority of the items
2 posts, 0 answered