WebBlue Padding on Menu

[Matthew]

I'm using the menu control with the WebBlue skin as well as a css class to make some minor adjustments to it (you guys provided the css class to me).  Here's the code below:

Code in CSS file:

div.MenuWithEnds
{
    border-left: solid 1px #69798C;
    border-right: solid 1px #69798C;
    padding-left: 0px;
    padding-right: 0px;
    position:absolute;
    right:10px;
}

Code in ASPX page:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="WebBlue" Flow="Horizontal" CssClass="MenuWithEnds">
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    <Items>
        <telerik:RadMenuItem id="mnuTools" runat="server" Text="Tools" Value="Tools" ToolTip="Tools" style="z-index:10000;">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem id="mnu2" runat="server" Text="Item2" Value="Item2" NavigateUrl="">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem id="mnu3" runat="server" Text="Item3" Value="Item3" NavigateUrl="">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem id="mnu4" runat="server" Text="Item4" Value="Item4" NavigateUrl="">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem id="mnuLogout" runat="server" Text="Log out" ToolTip="Log out" Value="Logout" NavigateUrl="~/Logout.aspx">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

My problem is that the left and right padding on each item is too large.  How can I adjust my css class (or add a new css class) so that I can adjust the padding of the menu items?

[Peter]

Hello Matt,

Actually, the spacing between the menu items is not caused by padding attributes, but by the width which the WebBlue skin applies to the items. Please, overwrite this rule with the following css selector:

 .RadMenu_WebBlue .rmItem a.rmLink
        {
            width:auto; /*or fixed width: 70px */
        }

Regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Matthew]

Great!  That fixed that problem, but now I'm still having issues with the spacing on the sub items (the menu items that roll out when you hover over a root item).  How can I change the width of those items?  The text of the sub items only takes up about 2/3 of the width of the sub item, so there is a lot of space to the right. 

Another thing, the icons on the sub items are flush against the text (there is no gap between the icon and the text).  Is there a way on the control or through CSS to add some space between the icon and the text?

Thanks,
Matt

[Alex Gyoshev]

Hi Matt,

The remedy for these problems is found within these lines of css:

div.RadMenu_WebBlue .rmGroup .rmLink
{
    min-width: 10px;
}

div.RadMenu_WebBlue .rmGroup .rmText {
    font-weight:normal;
    padding-left:12px; /* these two can be fine-tuned */
    padding-right:12px;
}


div.RadMenu_WebBlue .rmGroup .rmLeftImage {
    margin: 3px 4px 0 2px; /* adjust these values to your liking */
}

You could also control the width of the submenu using <GroupSettings Width="60px" /> (after setting the min-width in the css above to a small value).

Greetings,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center