CODEWITHSUNDEEP
htmlcss
IE8IsBetterThenGoogleChrome
IE8IsBetterThenGoogleChrome

Reputation: 2325

How to have HTML navigation bar stay the same, even if the webpage is too small

I have a navigation bar, but when the page is resized too small the navigation bar extends to a second line below it. I'd like it so even when the webpage is resized, the navbar stays the exact same (same size and everything). Here is some of my CSS that has to do with the navbar:

nav ul {
  margin-top:-200px;
  list-style: none;
  padding: 0;
}

nav a{
    text-decoration: none;
    color: inherit;
}
nav ul li {
  padding: 20px;
  float: left;
  background-color: #fff;
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 250px;
  left: 5;
  padding: 0;
}
nav ul ul li {
  margin-top: 0px;
  width: 200px;
  background: #FFF;
  padding: 10px;
}
nav ul li:hover ul {
  color: #4169E1;
  display: block;
}

SCREENSHOT: http://gyazo.com/86c490863c3f1149098b6600c1ab276b

Upvotes: 0

Views: 514

Answers (2)

André
André

Reputation: 121

Add a min-width to your navigation bar to force it to maintain a certain length. Here's the JSFiddle: http://jsfiddle.net/t8h50p2g/1/

nav {
min-width: 1000px;
}

Upvotes: 1

Ali Adravi
Ali Adravi

Reputation: 22723

Add one more line of css

nav {
  min-width: 800px; 
  max-width: 1200px;
}

Upvotes: 0

Related Questions