How can I prevent my navigation bar from breaking when zoomed out?
Below is the code snippet in question:
<nav>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">How we deliver</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Our Partners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
Here's the accompanying CSS code:
#nav {
margin:80px 0 40px;
list-style:none;
text-shadow: 0 -1px 3px #202020;
width:880px;
height:34px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:8px 8px 8px 8px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 3px #8b8b8b;
letter-spacing:-1px;
font-family:Calibri;
font-size:18px;
letter-spacing:-0.5px;
font-weight:500;
}
#nav li {
display:block;
float:left;
width:124px;
height:34px;
background-image: -o-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: -moz-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, rgb(0,100,145)), color-stop(0.62, rgb(0,129,187)));
background-image: -webkit-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: -ms-linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-image: linear-gradient(bottom, rgb(0,100,145) 20%, rgb(0,129,187) 80%);
background-color:#007fb9;
border-style:solid;
border-width:1px;
border-color:#005F82 #004A66 #005F82 #005D7F;
transition:all 0.5s ease 0s;
}
#nav li:hover {
background-image:-moz-linear-gradient(center bottom , #006491 100%, #0081BB 0%);
}
#nav li a {
text-decoration:none;
color:#FFF;
text-align:center;
color:white;
outline:medium none;
line-height:32px;
display:block;
}
#nav li:first-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:10px 0 0 10px;
border-left:none;
}
#nav li:last-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:0 10px 10px 0;
border-right:none;
width:124px;
}
nav {
width:890px;
margin-left:170px;
}
When testing the code locally, zooming out causes the navigation bar to break. However, on mobile devices, it appears fine. Can anyone offer assistance with this issue?
Thank you :)