---
title: "Fixed nav bar won't scroll right with rest of page"  
description: "Fixed nav bar won't scroll right with rest of page"  
author: "Anonymous User"  
published: 2013-06-15  
updated: 2013-06-15  
canonical: https://www.mindstick.com/forum/1152/fixed-nav-bar-won-t-scroll-right-with-rest-of-page  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Fixed nav bar won't scroll right with rest of page

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances),\
I found some code I wanted to use to make a [static](https://www.mindstick.com/articles/12098/the-static-keyword-the-static-methods) [navigation bar](https://www.mindstick.com/forum/33939/how-to-create-transparent-navigation-bar-in-xcode) that stays at the top of the [screen](https://www.mindstick.com/forum/33644/loading-screen-during-ajax-call) as you scroll down. That part worked out fine.\
However, when I resize the [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser) [window](https://www.mindstick.com/forum/161285/how-does-the-window-console-object-work-in-javascript), at first it would wrap to the next line. So I added white-space:nowrap so it would stay on [one line](https://www.mindstick.com/forum/159096/how-can-i-run-two-commands-in-one-line-in-windows-cmd). But now, if I resize the window, it will just cut off the [navbar](https://www.mindstick.com/forum/1331/expand-the-navbar-group-of-nabarcontrol-on-button-click-using-devexpress-navbarcontrol) 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](https://answers.mindstick.com/qa/40482/why-was-1968-a-year-of-tension-and-turmoil-list-10-events-1-being-the-best-and-10-the-worst-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.

## Replies

### Reply by AVADHESH PATEL

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.\


---

Original Source: https://www.mindstick.com/forum/1152/fixed-nav-bar-won-t-scroll-right-with-rest-of-page

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.