No announcement yet.

Styling the Top Navigation Bar so more than 8 choices will fit on one line?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Styling the Top Navigation Bar so more than 8 choices will fit on one line?

    I'm having a problem finding the CSS for allowing a WIDTH decrease on the items in our top global navigation bar. I added a 9th item ( "HOME" ) and now the bar wraps the last choice under, placing it by itself on a new line. For a quick look:
    It looks as if there is enough room on either side of the text in the menu choices for the "HOME" choice to be left in without the ugly wrap-under.
    Could someone point to the right spot to change the padding or some such?
    Thanks Much In Advance!

  • You'll need to ADD the following to a new CSS file (or place this in the head section of the global header using <style></style>

    @media only screen and (min-width: 960px) {

    .navigation-set .level-1 {
    font-size: 1rem;
    height: 3.375em;
    line-height: 3.375;
    text-transform: uppercase;
    width: 10%;

    (changes width from 12% to 10%)

    One should never change the default style sheets. Instead, you override the settings with your own. This lets you easily make any stylesheets updates from Miva (there has been several).

    Also note though, you might need to adjust the menu font size as well (font-size: .8rem;) HOWEVER: if I where you, I'd move the CONTACT choice off the main menu as it's not in keeping with the other items. (Generally, you want navigation items to be the same....product menus one place, account status and login in others, etc. Its common to put contact links top right near phone numbers and accounts.)
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook


    • Bruce! Thank You!
      'Had no idea this post was responded to so soon. - My old link to the forums took me to a strange, blank "extranet" page.
      I'll get this to the front burner and try the fix you've shown me ASAP.