Contents
You can use some Jquery code to achieve resizable Quick Lauch Navigation, it could increase/decrease width based on need, it should be the better solution in this case: Add into master page seattle.html under tag like this using SharePoint Designer:
How to customize the display of Quick Launch?
In SharePoint Designer 2010, open the website that you want to customize. In the Navigation pane, select Master Pages. Right-click v4.master, and then click Copy. Right-click an empty area of the Master Pages pane, and then click Paste.
How to make the Quick Launch bar dynamic in SharePoint?
Also note that I’m dealing with SharePoint 2016, so your experience may be slightly different depending on the version of SharePoint that you are working with. First, you’ll need to find the control with an ID of V4QuickLaunchMenu, which is the markup for configuring the Quick launch menu.
What should the staticdisplaylevels be in quick launch?
By default, the StaticDisplayLevels attribute is set to 2. This means that when the page is rendered, the Quick Launch area of the left navigation bar has two menu levels: a series of headings and, below each heading, a set of child links. Changing the value to 1 means that only headings are shown.
Here’s an image to show what i’m trying to do and Here’s the CSS code for the navbar. Any help will be highly appreciated. This will do the trick. The width of the nav bar is set to be 100%, but it is contained within the header tag which has a width of 980px.
How can I change the appearance of Quick Launch?
You can modify the appearance of Quick Launch by setting attributes on the AspMenu control that displays its navigational nodes. For example, you can set attributes that collapse the view of the menu to headings alone and add flyout menus for displaying subordinate menu levels.