css for Horizontal with drop down menus - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

css for Horizontal with drop down menus

  • css for Horizontal with drop down menus
  • 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?
  • 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.
  • 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
  • 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.
  • 282615_SubMenu.rar
    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
  • 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
  • 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.
  • 284901_265884-RadMenu-CSS-classes.png
    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.
  • 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
  • SportBet
    [url=https://www.gclub28.com/sbobet/][color=#262626]แทงบอลออนไลน์[/color][/url]