Increase the width of application navigation menu lists

[Flynt]

How do I increase the width of my application navigation menu items so they do not clip or word wrap?

[Flynt · Accepted solution]

In order to increase the width of your application navigation menus, you will need to do some editing to your appropriate application.css file.

First increase the container size - In this example 500px but you can modify as needed.


.splMenu-primary ul div.outerMenuWrapper {
width:500px;
}

Secondly increase the element size - Example is also 500px but modify as needed.


.splMenu a {
display: block;
padding: 5px 10px;
width: 500px;
text-decoration: none;
overflow: visible;
white-space:nowrap;
}

Your menu items should now no longer clip or word wrap.