CODEWITHSUNDEEP
htmlcssgoogle-chromenavigation
K3P
K3P

Reputation: 45

How to keep nav bar from shifting elements to next line when zooming in?

Edit: solved by jirikuchta! I added white-space: nowrap; to #navigation in my CSS. Read on for more information on the problem that was fixed. Hope it can help someone else out there!

I've seen this question a hundred times over the internet over the past few days trying to fix my problem, but absolutely nothing has worked for me. When I zoom at all in Google Chrome, my nav bar shifts the last link to the next line, effectively ruining the whole layout. I'm new to html but this is the first real roadblock I've run into, and I'm absolutely stumped. I've followed the advice on countless other websites, adding min-width and max-width, wrappers, positions, switched to em and %, but nothing has worked. I'm assuming that the problem is that when you zoom, things round up and make things too big for the space provided, but I simply don't know how to counter this problem. Thanks in advance for any and all help!

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<link rel="shortcut icon" type="image/x-icon" href="layoutImages/favicon.png">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800' rel='stylesheet' type='text/css'>
<link href="webpage.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancyBox/source/jquery.fancybox.pack.js"></script>
</head>

<body>
<div id="container">
<nav>
    <div id="navigation">
        <ul>
            <li><a href="index.html">home</a></li><li><a href="about.html">about</a></li><li><a href="milk.html">milk</a></li><li><a href="farm.html">the farm</a></li><li><a href="contact.html">contact</a></li>
    </ul>
  </div>
</nav>
<div id="banner"><img src="layoutImages/aboutBanner.png" width="955" height="400" draggable="false" style="-moz-user-select: none; display:block; " /></div>

CSS:

@charset "UTF-8";

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, address, blockquote {
    margin: 0px;
    padding: 0px;
    font-size: 16px/9px;
    font-style: normal;
}
html {
    background-color:#F8F7E4;
}
#container {
    width:955px;
    height:auto;
    background-color:#d2d2de;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#navigation li {
    font: 35px Arial Black;
    display: inline;
}
#navigation a {
    padding:9px 35px;
    background-color:#0080c2;
    color:#F8F7E4;
    text-decoration:none;
}
#navigation a:hover {
    background-color:#F8F7E4;
    color:#000;
}

I can tell that there's something that I'm not understanding, I just need some help to really figure this out. I've been struggling for a few days now.

Additionally, the reason that I'm so concerned about the zooming is that this site will primarily be viewed from my parents' computer, and they have Chrome set to 125% zoom for better visibility.

Upvotes: 2

Views: 1840

Answers (1)

jirikuchta
jirikuchta

Reputation: 338

Not sure if it will helps but can try to apply white-space: nowrap to the #navigation element.

Upvotes: 1

Related Questions