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
15-Jun-2013