Apply Bootstrap To ASPNet Menu Control

applyBootstrapToASPNetMenuControl.html

<!-- 1. wrap with a div to force generated menu float -->
<div style="float: left;">
    <!-- 
        2. set [SkipLinkText=""] to hide skip link anchor tag (which will cause element shift in chrome)
        3. set [IncludeStyleBlock="false"] to disable asp.net menu control's styles, which would conflict with bootstrap styling
        4. apply bootstrap css to menu
            4.1 CssClass="nav navbar-fix-top"
            4.2 StaticMenuStyle-CssClass="nav navbar-nav"
            4.3 StaticSelectedStyle-CssClass="active"
            4.4 DynamicMenuStyle-CssClass="dropdown-menu" 
      -->
    <asp:Menu ID="Menu1" 
        runat="server" 
        Orientation="Horizontal" 
        StaticDisplayLevels="1"
        DynamicPopOutImageUrl="../Img/arrow.png" 
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick" 
        MaximumDynamicDisplayLevels="10" 
        EnableViewState="false"
        CssClass="nav navbar-fix-top" 
        StaticMenuStyle-CssClass="nav navbar-nav" 
        StaticSelectedStyle-CssClass="active"
        DynamicMenuStyle-CssClass="dropdown-menu" 
        IncludeStyleBlock="false" 
        SkipLinkText=""
        RenderingMode="List">
    </asp:Menu>
</div>

Thank you very much.
This helped me a great deal.

Great!

Excellent!

Hi...I was looking for this as well. But this is not working for me. attaching menu . This is supposed to be multilevel menu but its showing only the 1st level, My menu is bound with sql server. Please help . In my case i want menu should open up to show sub menu in it

not able to figure out whats wrong

Excellent work dear,
I have one question, how can add class nav-item for li tag
in your example the StaticMenuStyle-CssClass="navbar-nav ml-auto" work for ul tag
and StaticMenuItemStyle-CssClass="nav-link" for a tag

I want to add class nav-item for li tag, could you help me in that??