TopNav: Control width of top-of-page navigation menu?

[Phlawm53]

------
For Flare 11, HTML TopNav.

What is the proper way to modify or otherwise control the width of the Home page's top-level navigation menu?

I have five book-level TOC entries. This causes the top-level navigation menu to wrap the fifth item onto a new line.

In pursuit of a fix, I gen'ed the output then went spelunking in the CSS searching for the class or entity I could widen. No luck.

Among other things I tried modifying in my project's StylesForHomePage.css file were section.tab-bar-section.middle and ul.navigation.clearfix. As I experimented I added a temporary border to the classes in StylesForHomePage.css to verify that I'd identified the correct classes. I could see those temp borders but I never could force any of these menu elements to become wide enough to contain all my menu items.

It wasn't made easier that there is LOTS of nested stuff-inside-stuff in the CSS, plus lots of Zurb framework stuff, too.

The end result was that I never did manage to resize the navigation bar along the top of a TopNav project's Home page. I ended up shortening my book-level titles in the TOC as a temporary circumvention. I did also go spelunking in the PDF docs, etc. Whew! It seemed easier to dive into the bowels of the generated CSS.

Cheers & thanks for your help,
Riley
SFO

[Mike Kelley]

In your situation you'll probably want to set a width for .tab-bar-section.middle > div in the home page stylesheet. That changes the width of the top header and makes sure the logo image is still aligned properly with your based on the width of that container.

[wclass]

I've changed the width in the skin - did you try there?

The default width looks to be 60ems - you can change the width of the top nav bar, the search bar, and the body all separately.

Have a look in the skin editor, select styles, and then look at: Global > Main page > size; and then Header > Header > size, and check the search bar at the same time.
For reference:

skin_set_width.png

[Phlawm53]

------
Thanks wclass — The skin editor is the place to go.

Per the following, I did manage to find the menu's CSS elements in StylesForHomePage.css and apply temporary troubleshooting borders to them:

TopNavMenuWidths.PNG

The problem was that attempts to then use StylesForHomePage.css to override the default width of .tab-bar-section.middle wasn't working.

As shown above, changing the value of Styles —> Header —> Maximum Width is the way to do it.

Cheers & THANKS! 'gain for your help,
Riley
SFO