Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nav Breaks on Browser Zoom Out/In

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #38555
    marisk28
    Member

    Hi Guys,

    Currently working on this site: http://shop.nilejohnson.com/

    The navigation in grey blocks “Home,” “Our Studio,” “Portfolio”, etc. breaks when you zoom in or out of the page (Ctrl and +/-) in any browser. “Contact” ends up below the rest of the navigation bar. When viewing the page at the base zoom (100% I assume) the nav bar appears on the same line.

    I’d appreciate any help on how to remedy this. Thanks so much!

    Example of Nav Bar CSS:

    #nile-johnson-nav {
    margin: 0;
    overflow: hidden;
    }

    #nile-johnson-nav ul {
    white-space: nowrap;
    }
    #nile-johnson-nav li {
    background-color: #E5E5E5;
    color: #676767;
    float: left;
    display: inline-block;
    font: 13px/31px Arial, Helvetica, sans-serif;
    margin: 0 3px 0 0;
    text-transform: uppercase;
    }

    #nile-johnson-nav li a {
    display: inline-block;
    color: #676767;
    padding: 0 16px;
    text-decoration: none;
    }

    #104573
    Paulie_D
    Member

    As what size does it break? In Chrome I hit Ctrl+ a number of times and it didn’t break until the 5th hit.

    Oddly, on the 6th hit it reverted but added a scrollbar.

    #104593
    marisk28
    Member

    When you Ctrl- once (sometimes twice) it breaks (all browsers), and Ctrl+ twice in Safari it breaks.

    #104597
    Paulie_D
    Member

    I think this is a padding (16px) issue on your LI A. I assume that this is set so as to span the whole width.

    However, when you reduce the scale (Ctrl-) then there is not enough room for all those pixels. Try reducing that to say 10px and you can scale down a 3 or 4 times before it breaks.

    Then just center the nav.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.