Home > DeveloperSection > Forums > Fixed nav bar won't scroll right with rest of page
Jeet Verma
Jeet Verma

Total Post:110

Points:776
Posted on    June-15-2013 3:27 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 864  View(s)
Rate this:
Hi Expert,

I found some code I wanted to use to make a static navigation bar that stays at the top of the screen as you scroll down. That part worked out fine.

However, when I resize the browser window, at first it would wrap to the next line. So I added white-space:nowrap so it would stay on one line. But now, if I resize the window, it will just cut off the navbar at the edge of the browser window.

I would like the page to scroll right/left, not just scrollbars under the navbar. How might I do that?

Thank you in advance. This is what I'm working with: http://jsfiddle.net/TYgSx/3/embedded/result/

This is the HTML:

<div id="nav">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

CSS:

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
 left:0px;
 white-space:nowrap;
}

#navigation
{
 list-style-type:none; 
}
li 
{
 display:inline;
 padding:10px;
}

#nav a
{
 font-family:verdana;
 text-decoration:none;
 color:#EDEDED;
#nav a:hover 
{
 color:#BDBDBD;
}

Any help on above is really appreciated.


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-15-2013 3:45 AM

Hi Jeet,

You need to add overflow and set it to auto in your css.

#nav {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 **overflow: auto;**
 top:0px;
 left:0px;
 white-space:nowrap;
}

I hope it helpful for you.


Don't want to miss updates? Please click the below button!

Follow MindStick