Setting max-width for Navigation menubar RRS feed

  • Question

  • HI,

    I have a custom Master page, in which I have added the Menu control. The menu works fine. If the user clicks on the menu, i am showing the pages below.. In each of the menu item, how to set the max-width, min-width, and text-overflow as ellipsis.

    The below code is from IE developer tools:

    <td class="tdNewNav" style="border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none;">
    <div class="ms-displayInline ms-core-navigation" id="DeltaTopNavigation" role="navigation">
    <div class=" noindex ms-core-listMenu-horizontalBox" id="zz13_TopNavigationMenu">
    <ul class="root ms-core-listMenu-root static" id="zz14_RootAspMenu">
    <li class="static selected">
    <a tabIndex="0" title="Home" class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" accessKey="1" href="/s/testdemo/Pages/Home.aspx">
    <ul class="static">
    <li class="static">
    <a tabIndex="0" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/s/testdemo/Lib/Pages/default.aspx">
    <span class="additional-background ms-navedit-flyoutArrow">
    <span class="menu-item-text">

    How to set the max-width, min-width, text-overflow options for the menu items?


    Tuesday, March 10, 2015 10:41 AM