Search code examples
c#asp.netaspmenu-control

Item space between in menu item is not working in asp.net


I'd like give a space between asp.net menu item. Hence, I tried with the staticmenuitemstyle and horizontalpadding="10" attribute which was suggested by some other post in SO. But, It's not working.

<staticmenuitemstyle horizontalpadding="10" />

Please let me know how can I give space between menu item ?

My code ::

 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
           EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal" 
           BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" 
           Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px">
      <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
      <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
      <DynamicMenuStyle BackColor="#F7F6F3" />
      <DynamicSelectedStyle BackColor="#5D7B9D" />
      <staticmenuitemstyle horizontalpadding="10" />
      <Items>
          <asp:MenuItem NavigateUrl="~/WebPages/Default.aspx"  Text="Support1">
          <asp:MenuItem NavigateUrl="~/WebPages/Default2.aspx"  Text="Support2">
      </Items>
</asp:Menu>

Solution

  • You can use CSS Selectors to achieve that

    In your code you have asigned the CssClass attribute to your Menu control. Make use of that CSS class called "menu" and override it in your page (you can move it later to a css file). So add this to your page in the <head>

    <style type="text/css">
        .menu li ~ li
        {
            padding-left: 100px; /* selects every <li> element that are preceded by a <li> element. */
            list-style:none;
        }
    
        .menu ul > li:first-child
        {
            font-size:20px;/* this one will select the first element of your menu */
        }
    </style>
    

    Please note that I added the .menu ul > li:first-child selector so you will not get a left padding on the first element of the menu, I just changed the font-size to give you an example of the control that CSS selectors provide. You can remove it if you like.

    Hope this helps you