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

Forums / Designing & Styling / css for Horizontal with drop down menus

css for Horizontal with drop down menus

9 posts, 1 answered
  1. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    29 Jun 2011
    Link to this post
    I have styled my horizontal menu fine, but the drop down menus seem to share the same style as the horizontal menu. 

    Is there a way to seperatly style just the drop down menus?
  2. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    01 Jul 2011
    Link to this post
    anyone?  do you understand what I am talking about?  just using the regular navigation widget..  the bg color and font size/styling is the same for the drop downs as it is for the main navigation... which is ugly.  I just want a way to change the drop down bg color and font styles.
  3. Mark
    Mark avatar
    147 posts
    Registered:
    01 Jun 2010
    01 Jul 2011
    Link to this post
    Robert, this was posted in another thread a while back but I am constantly referencing it and thought it might be what you're looking for: http://www.sitefinity.com/ClientsFiles/270615_Layout.css
  4. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    02 Jul 2011
    Link to this post
    I added that css file to my site to see what it would do... it changed the styling but the nav is still the same.  Both the horizontal menus and the drop downs have the same styling.  I am looking to differentiate them.  Unless you know what actual classes in the css file are linked to the drop downs i don't see how that is going to help.
  5. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    04 Jul 2011
    Link to this post
    Hi Robert,

    I have attached a small video where I make changes to only the sub menu items. Using firebug you can review which classes get applied to them.

    All the best,
    Stanislav Velikov
    the Telerik team
    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
    Answered
  6. Robert
    Robert avatar
    49 posts
    Registered:
    21 Feb 2011
    05 Jul 2011
    Link to this post
    Stanislav,

    Thanks that helped alot.  as soon as I saw how you were using firebug to find the right css elements it was easy to change the drop down style.  love it!!

    -Robert
  7. Jonathan
    Jonathan avatar
    1 posts
    Registered:
    13 Jul 2011
    13 Jul 2011
    Link to this post
    Thanks.

    I can see what I need to change in the CSS by using Firebug, but there is one CSS file I need to edit that I can't reference. When I click on a drop down menu in Firebug, it says the CSS is located at mysitename//WebResource.axd?d=2ChTB731EMjeRUVOGRBS9OA55v1cq_vIkcsScFqJ_t6zGIr6iEcm05P5JjnLKTdKbU5AFuVDXX-v518MkPgj5pxHpG0J-sIK0QpsgdqZWAqluoq7-JGxmlsbJuZ20mxz0imH5g2&t=634255064593639706

    Styles in this sheet are overriding any other styles I would write anywhere else.
  8. Phil Wilson
    Phil Wilson avatar
    18 posts
    Registered:
    22 Apr 2010
    14 Jul 2011
    Link to this post
    Hi, Robert.

    I actually know exactly what you're talking about in your post. Since every item in the drop-down menus are technically nested underneath the rmHorizontal class, it is inheriting the styling you apply there.

    What I've done on my end is style the .rmHorizontal element but then also style the .rmVertical elements as well. As long as these are later in your CSS file, those settings will dominate (provided you don't have !important on the upper ones and not on the bottom).

    The attached file elsewhere on this site is helpful for determining the class structure for the Navigation widget.

    The Navigation Widget is helpful but it definitely takes some getting use to.

    Hope this helps.
  9. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    30 Nov 2016
    14 Jul 2011
    Link to this post
    Hello,

    @Jonathan
    With firebug you don`t have to edit the embedded css styles which are default for the navigation control. You have to use the classes like .rmSelected and add different rules to them with !important where needed. You style the menu in your theme`s css or you put the css in a CSS widget. Please note firebug only apply test styles and changes to the styles are not saved in your css files. To edit your css and save it to the file as you browse you need to use other plugins.

    All the best,
    Stanislav Velikov
    the Telerik team
    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
9 posts, 1 answered