Menu wraps to multiple rows in tablets

If your SharePoint 2013 or Office 365 top navigation wraps into multiple rows when in tablet view (see screenshot below), you can add some styles to adjust it to a suitable layout.

If this is the case, you can solve this in 2 or 3 steps:

Step 1: get first item and remain items together

  1. Edit the theme's masterpage file
  2. Locate body's end tag </body>
  3. Add the following code right above </body> tag:
    <script type="text/javascript">
      var liClass = $('#MenuH .root.ms-core-listMenu-root.static li').attr('class');
    var firstElement = $('#MenuH .root.ms-core-listMenu-root.static li > a');
    $('#MenuH .root.ms-core-listMenu-root.static ul.static').prepend('<li id="firstElement" class="'+liClass+'"></li>');
    $('#firstElement').append(firstElement[0]); </script>
  4. Save the masterpage file, check in and publish the major version.

Step 2: reduce font size and space between each item

Descreasing navigation font size and the space between itens will allow to have room for more items in the exact same space.

  1. Edit the theme's css file
  2. Add to the bottom of the file:
    .ms-core-listMenu-horizontalBox ul { display: inline; }
    #MenuH li.static>.menu-item,
    #MenuH li.static>a.menu-item,
    #MenuH .ms-navedit-dropNode .static.menu-item { padding:VALUE;}
    #MenuH li.static>.menu-item .menu-item-text,
    #MenuH li.static>a.menu-item .menu-item-text,
    #MenuH .ms-navedit-dropNode .static.menu-item .menu-item-text { font-size:VALUE; padding:VALUE; }
  3. These values will be different from theme to theme. Make sure to adjust values depending on your specific theme.
  4. Save the css file, check in and publish the major version.

Step 3: increase navigation's height

If your website has so many items that you cannot wrap it into a single row, you'll probably have to keep using two navigation rows, as the screenshot below.

If this is your case:

  1. Edit the theme's css file
  2. Add to the bottom of the file:
    #Menu { height:auto; }
  3. Save the css file, check in and publish the major version.
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk