CODEWITHSUNDEEP
htmlcss
Mlagma
Mlagma

Reputation: 1260

Scrollbar is permanently determining the size of my nav tag

I'm not sure how else to describe this: When a scroll bar appears and I scroll to the right due to overflow, my nav tag is resized to a shorter field. In any case, pictures are better:

Without Scrollbar

With Scrollbar

In the second image, it is obvious that the field has shortened in length. I'm not sure why this is happening. Here's my code:

<link rel="stylesheet" type="text/css" href="../CSS/Style2.css"/>

<body>
  <script type="text/javascript" src="../JS/jquery.js"></script>
  <script type="text/javascript" src="../JS/respond.min.js"></script>
  <script src="../JS/jquery.min.js"></script>
  <script type="text/javascript" src="../JS/menu_dropdown.js"></script>

  <nav class="clearfix">  
    <ul class="clearfix">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">Territory</a></li>  
    <li><a href="#">Publishers</a></li>  
    <li><a href="#">Special Campaign</a></li>  
    <li><a href="#">Management</a></li>  
    <li><a href="#">About</a></li>    
</ul>  
<a href="#" id="pull">Menu</a>


The CSS:

@charset "utf-8";
/* CSS Document */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
  background: url(../Images/bg.jpg)
}

body {
  height: 100%;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}

nav {  
  height: 40px;  
  width: 100%;  
  background: #455868;  
  font-size: 11pt;  
  font-family: 'PT Sans', Arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  border-bottom: 2px solid #283744;  
}  
nav ul {  
  padding: 0;  
  margin: 0 auto;  
  width: 900px;  
  height: 40px;  
}  

nav li {  
  display: inline;  
  float: left;  
}  

.clearfix:before,  
.clearfix:after {  
  content: " ";  
  display: table;  
}  
.clearfix:after {  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}  

nav a {  
  color: #fff;  
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
  border-right: 1px solid #576979;  
  box-sizing:border-box;  
  -moz-box-sizing:border-box;  
  -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
  border-right: 0;  
}  

nav a:hover, nav a:active {  
  background-color: #8c99a4;  
}  

nav a#pull {  
  display: none;  
}  

@media screen and (max-width: 600px) {  
nav {   
    height: auto;  
}  
nav ul {  
    width: 100%;  
    display: block;  
    height: auto;  
}  
nav li {  
    width: 50%;  
    float: left;  
    position: relative;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
    border-right: 1px solid #576979;  
}  
nav a {  
    text-align: left;  
    width: 100%;  
    text-indent: 25px;  
}  
}  

@media only screen and (max-width : 480px) {  
nav {  
    border-bottom: 0;  
}  
nav ul {  
    display: none;  
    height: auto;  
}  
   nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url(../Images/nav-icon.png) no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
} 
}  

@media only screen and (max-width : 320px) {  
nav li {  
    display: block;  
    float: none;  
    width: 100%;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
}  
}

Any insight is appreciated.

Upvotes: 0

Views: 157

Answers (3)

yeyene
yeyene

Reputation: 7380

Find your nav a css style and replace this css and done.

DEMO http://jsfiddle.net/bC63a/

NEW

nav a {  
  color: #fff;  
  background: #455868;
  border-bottom: 2px solid #283744; 
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}

OLD

nav a {  
  color: #fff;  
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}

Upvotes: 0

uber5001
uber5001

Reputation: 3964

Your nav width is 100%! it's only going to be 100% width of the body. If you scroll to the right, your nav doesn't get any bigger. The text is just overflowing out of it. I'd suggest setting the backgrounds of each nav item to a solid color.

EDIT: an odd fix: Change your width: 100% from the nav to min-width: 100%. That (and the fact that nav is a block element) is what is limiting the width. In order to make sure it flows to the right, put display: inline-block in its place.

Upvotes: 1

Rooster
Rooster

Reputation: 10077

yeah this is an annoying.

the problem with setting a width to 100% is that zooming or different screen sizes can render it differently depending on other css rules.

you should set a min-width to whatever you expect the usual width to be.

for me a min-width:960px usually does the trick but it looks like your using a 900px value.

so add min-width:900px to your nav {} style rules. or whatever width youre using.

nav {  
  height: 40px;  
  width: 100%;  
  background: #455868;  
  font-size: 11pt;  
  font-family: 'PT Sans', Arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  border-bottom: 2px solid #283744;
  min-width:900px;
}

Upvotes: 1

Related Questions