none
Top Navigation Bar Wraps Text RRS feed

  • Question

  • Hi all,

    Besides editing the core CSS or using a Content Editor to inject CSS, is there a way to stop the word wrap on the top navigation bar for flyout items (I am using Managed Navigation).

    Thanks,

    Kelly


    Personal Blog: http://thebitsthatbyte.com

    Thursday, July 25, 2013 1:44 PM

Answers

  • Typically our HTML team has overridden specific SharePoint styles by including a new CSS file in the master page at the end of the <head> section. 

    Since you are using Managed Navigation, I assume you have "publishing" turned on.  In that case, you can put your custom style sheet in the "Style Library".  Also, with Publishing, you will not be able to edit the standard Master Pages as they have been generated from a design package.  Instead, you will need to download a copy of the current Master Page, rename it, and upload it again into the Master Pages gallery.  You will need to then select that Master Page in the Design Manager under "Publish and Apply Design" and clicking "Assign master pages to your site based on device channel".  (Note that once you upload a master page in this way, you can edit it in SharePoint Designer.)

    I tried to figure out the styles you should override.  Those menu items have a "menu-item-text" class.  You can add a ".menu-item-text" style to your style sheet file with "white-space:no-wrap".  I tried doing that and it did prevent the word wrap, and it looked fine in Chrome, but in IE, there were characters wrapping in the box instead.  So you'd have to figure out why the auto-sizing in IE is not working as expected.

    regards,

    -mfharvey

    • Marked as answer by Emir Liu Wednesday, July 31, 2013 1:18 AM
    Monday, July 29, 2013 9:23 PM

All replies

  • Typically our HTML team has overridden specific SharePoint styles by including a new CSS file in the master page at the end of the <head> section. 

    Since you are using Managed Navigation, I assume you have "publishing" turned on.  In that case, you can put your custom style sheet in the "Style Library".  Also, with Publishing, you will not be able to edit the standard Master Pages as they have been generated from a design package.  Instead, you will need to download a copy of the current Master Page, rename it, and upload it again into the Master Pages gallery.  You will need to then select that Master Page in the Design Manager under "Publish and Apply Design" and clicking "Assign master pages to your site based on device channel".  (Note that once you upload a master page in this way, you can edit it in SharePoint Designer.)

    I tried to figure out the styles you should override.  Those menu items have a "menu-item-text" class.  You can add a ".menu-item-text" style to your style sheet file with "white-space:no-wrap".  I tried doing that and it did prevent the word wrap, and it looked fine in Chrome, but in IE, there were characters wrapping in the box instead.  So you'd have to figure out why the auto-sizing in IE is not working as expected.

    regards,

    -mfharvey

    • Marked as answer by Emir Liu Wednesday, July 31, 2013 1:18 AM
    Monday, July 29, 2013 9:23 PM
  • Thanks! I will look into the auto-sizing.

    Personal Blog: http://thebitsthatbyte.com

    Monday, July 29, 2013 9:31 PM
  • Here is a great post leveraging CSS to make this adjustment:

    http://richardstk.com/2013/09/26/sharepoint-2013-global-navigation-styling-css/


    Personal Blog: http://thebitsthatbyte.com

    Wednesday, December 18, 2013 2:19 PM