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

Forums / Designing & Styling / RadMenu styling question

RadMenu styling question

5 posts, 0 answered
  1. Bob
    Bob avatar
    14 posts
    Registered:
    06 Jul 2012
    09 Jan 2013
    Link to this post
    Hello,

    For a website project (Sitefinity 5.2) I am styling a RadMenu to appear according to my wishes. The menu is horizontal, with vertical dropdowns on mouse-over. Submenu's also drop down vertically as they expand to the right. So far I've been able to change everything that I want, using the information given on this page

    But now, I can't figure out which css class to change if I want to line up the vertical dropdown with the bottom of the background that is used by the menu (see attached image). As you can see, there's a horizontal line that runs just behind the top of the dropdown menu. It's part of the background image used behind the menu, so not actually part of the menu itself. I've tried various values for various radmenu classes but nothing seems to bump down the dropdown menu so that it lines up with this line. 

    Can anyone advise me on where to look?

    Thanks!
  2. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    09 Jan 2013 in reply to Bob
    Link to this post
    Hey Bob,

    Out of the top of my head I'd say it would have to be a padding/positioning on either .rmSlide or ul .rmVertical .rmGroup .rmLevel1 which should do the trick.

    Easiest way to check/play is by using Chrome, right-click on "Vertaalbureau" and choose inspect element. On the rightside of the screen, adjust the rmslide element to overflow:visible and display:block; same for the rmVertical.... this will trigger the dropdown menu to display and you should be able to visually play around with margins/positioning.

    If you need a hand, feel free to email and goed om te zien dat ze van Drupal afstappen!
    Jochem
  3. Bob
    Bob avatar
    14 posts
    Registered:
    06 Jul 2012
    11 Jan 2013 in reply to Jochem Bökkers
    Link to this post
    Thanks! I added padding-top: 4px;  to the .rmSlide class and it lines up perfectly! I could've sworn I tried that class already, but I guess not. Thanks a lot!

    And well spotted ;-)

  4. Bob
    Bob avatar
    14 posts
    Registered:
    06 Jul 2012
    11 Jan 2013
    Link to this post

    Ah, I have a follow-up question. While the code worked for the 1st level of the dropdown, the 2nd level is of course also affected, resulting in a misalignment on the sub-submenu. So I thought I'd set a separate padding for the different levels of .rmSlide. I was thinking something along the lines of:

    .rmSlide .rmVertical .rmGroup .rmLevel1
    {
    padding-top: 4px;
    }
     
    But that didn't work. Alternatively I figured I could do it using a padding for the ul instead of .rmSlide:

    ul .rmVertical .rmGroup .rmLevel1
    {
    padding-top: 4px;
    }

    But that didn't do anything at all, not for .rmLevel1 nor .rmLevel2. 

    Any ideas? Is there a way to set .rmSlide separately for the different levels? 

  5. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    14 Jan 2013 in reply to Bob
    Link to this post

    Bob,

    the ul .rmVertical .rmGroup .rmLevel2 selector should match the second level menu exactly, keep in mind that some of the styling on a radmenu happens inline, so !important might be useful.

    Instead of padding-top on the ul, which adds a padding inside div box, try instead {top:4px;} which would force the box to start lower.

    If you're aiming for something generic, a child selector on .rmslide could do the trick.

    .rmSlide > ul.rmVertical {top:4px;}

    Or if you're aiming for separate ones

    ul.rmLevel1{top:4px;}
    ul.rmLevel2{top:5px;}


    Should work also, but I've not really played with it so you'd have to verify.

5 posts, 0 answered