CODEWITHSUNDEEP
cssresizenavautoresize
Johnz
Johnz

Reputation: 7

How to Keep Nav bar from shifting when window resized

I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.

This is my code:

HTML

<body>
  <div class="nav">
    <div class="container">
      <ul class="pull-right">
        <li><a href="#">HOME</a></li>
        <li><a href="#">WINES</a></li>
        <li><a href="#">GRAPES</a></li>
        <li><a href="#">ABOUT US</a></li>
      </ul>
    </div>
  </div>
</body>

CSS

.nav li {
  display: inline;
}

.nav a {
  color: #5a5a5a;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 10px;
}

.nav {
  position: absolute;
  top: 20px;
  right: 0px;
}

I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.

Upvotes: 1

Views: 18599

Answers (3)

bright
bright

Reputation: 191

You can solve this by adding a min-width to the navbar.

 navigation {        
    margin-right: auto;    
    margin-left: auto;    
    max-width: 100%;    
    min-width: 1000px;
}

Upvotes: 2

tojowe
tojowe

Reputation: 101

This should work

ul {
  white-space: nowrap;
}

Upvotes: -1

Charlie
Charlie

Reputation: 90

You can solve this by adding a minimum width to a div surrounding the nav bar.

In your case it would be in the .nav class

.nav {
   min-width:165px;
   position: absolute;
   top: 20px;
   right: 0px;
}

I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.

Upvotes: 0

Related Questions