1

I'm trying to get my nav-bar to follow the top of the page when the user scrolls down, so I used fixed positioning which does do this for me, but the problem is that once the user decreases their page width to less than the min-width that has been set, the content of the page can be scrolled to view, but some items from the nav bar will get cut off and you can't scroll to view the rest of the items. When the nav-bar isn't set to fixed and the current page width < the min-width, you are able to still scroll to see the rest of the nav bar items, as well as the actual page content. I'd like to try to avoid using JavaScript for this project if I can.

Here's my CSS I'm using for the nav:

nav{
  min-width: 900px;
  position: fixed;
  background-color:white;
  width: 100%;
}

nav img{
  display: block;
  margin: 0 auto;
  width: 25%;
  padding-top:5px;
  padding-bottom: 15px;
}

nav li{
    font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  padding: 10px 50px 0px 10px;
}
nav a{
  color: white;
  text-decoration: none;
}
nav ul{
  margin: 0;
  height: 30px;
  background-color: black;
}

And here's the full website URL: http://cydronixweb.kkhorram.info/

Ajax jQuery
  • 357
  • 1
  • 5
  • 19
  • Use media queries to differ between different window sizes. – Thomas Apr 08 '15 at 00:57
  • Set your nav height as a percentage and then add `overflow-y: auto;` and see if that works. And you _need_ to enable [gzip compression](http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) and possibly caching, your loading time is extremely long. – Krii Apr 08 '15 at 02:21

1 Answers1

0

If you remove the min-width rule on both the body and the nav, things begin to shrink and fill the screen real-estate. Personally, I think this is a perfect approach here. However, because you also have an explicit height on the nav, your li's begin to fall out. Simply remove the height, slap some padding on the top and bottom of your ul and I think you'll be good.

body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Helvetica, Sans-Serif;
}

nav ul {
  margin: 0;
  padding: 10px 0;
  background-color: black;
}

nav li {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  padding: 10px 50px 0px 10px;
}
user2697219
  • 1
  • 1