CODEWITHSUNDEEP
htmlcssbrowserpositionoverflow
Unknown
Unknown

Reputation: 77

Fixed positioned element does not adapt to the width of the window/viewport

I'm trying to make a fixed positioned navigation bar for my site with css. The problem occurs when I'm resizing the browser. The elements inside my navigation bar go out of the viewport when I resized my the browser window size.

It's a similar problem with this site. When you scroll down a bit, you should see that "Products" element with a fixed positioned. Now try resize the browser window width until you can't see that "Job Listings", "Company Pages", "Candidate Search" links. Your browser should give you a scroll bar to scroll within the pages. When you scroll to the right, the pages content will get scrolled to, but this scrolling doesn't affect that "Products" element.

#header {
top:0px;
left:0px;
position:fixed;
height:50px;
width:100%;
z-index:100;
background:rgb(0, 0, 0);
background:rgba(0, 0, 0, 0.8);
padding-top:10px;
}

#nav_bar {
color:#FFFFFF;
width:894px;
margin:0 auto;
background:rgb(255, 255, 255);
background:rgba(255, 255, 255, 0.3);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:3px;
font-weight:bold;
}

a{
color:#FFFFFF;
text-decoration:none;
color:#F9BF3B;
background:rgb(137, 196, 244);
background:rgba(137, 196, 244, 0.5);
text-decoration:none;
}

#navlink {
text-decoration:none;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
width:100px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:center;
}

Any idea to solve this? Thanks. Btw this is my code

Upvotes: 2

Views: 2403

Answers (1)

George Katsanos
George Katsanos

Reputation: 14175

The main answer to your question is:

You can't scroll the whole page (with the navbar included) because you use position: fixed.

http://quirksmode.org/css/css2/position.html

An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.

In your case, if you want to keep your navbar position:fixed, AND make all the navigation links accessible when you resize your window, I have a better suggestion:, change the width values that you've set in pixels into percentages and your elements will be fluid. Never use pixel width values if you want your layout to be fluid.

Here's the updated code: http://jsfiddle.net/httg1e2w/3/

PS: Important: you are using "navlink" multiple times in your HTML. IDs are supposed to be Unique. Use classes instead. This may create you headaches in older browsers.

<a href="..." class="navlink">link</a>

Upvotes: 1

Related Questions