You can modify the styling code (css) for the navigation menu container and the menu links elements. In your case, I'd suggest increasing the width of the container from the default 50% to 80% and then, for good measure, decreasing the left/right padding of the menu items and decreasing the font size just a smidge:
- In the Site Editor, click on "Theme" in the top navigation menu.
- Click on "Edit HTML/CSS" at the bottom of the sidebar. This will take you to the Code Editor.
- By default, you'll be focused on the main.less file in the Code Editor where your site's css code resides. You'll now modify the two key navigation menu elements that are responsible for the overly-aggressive text wrapping of your menu link items:
Menu container
Search for the menu container element. Click the magnifying glass and search for "desktop-nav". You should find the small block of styling code below. Change the width from 50% to 80% (highlighted in red text below).
.desktop-nav {
width: 80%;
text-align: center;
}Navigation menu links
Go back to the top of the css code and search for the anchor link element within the navigation element. Click the magnifying glass and search for "nav a". You should find the block of styling code that looks like the code below. In the "padding" attribute, reduce the left/right menu links padding from 20px to 10px (highlighted in red text below). And, just for good measure, shrink your menu link font size just a little bit from 14px to 13px (also highlighted in red text below).
Navigation menu link styling
.nav a {
display: block;
padding: 10px 10px;
font-family: "Unite", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
}After you make these code updates, you should find that the navigation menu will not wrap even at smaller screen sizes until you hit the mobile screen size (in which case, your full desktop navigator will collapse into the mobile hamburger). You can emulate smaller screen sizes on your desktop computer by shrinking the width of your browser window. Your site will automatically adjust itself as the window shrinks. You'll see how your navigation menu behaves at the different window sizes until you get small enough (to mobile size) and the navigation menu collapses into the mobile hamburger.
Navigation menu before css modification:
Navigation menu after css modification:
