This is my first time designing a website, and I am having trouble getting my headerMenu to scroll horizontally with the rest of the page when the window is either re-sized or zoomed. I know I have #header {position:fixed;} but I need the header and its contents to be fixed to the top of the page. Can this be remedied with just CSS/HTML? I can easily put a scrollbar at the bottom of the header, but looks-wise I was hoping there was some other option.
Dont mind the logo not blending in with the header, the graphics are being changed for the jpg currently.
The header stays fixed, but if the page is resized too small or zoomed in too far, the menu bar goes off the screen to the right and will not scroll with the rest of the page.
You seem to have a fixed with page in mind whose widest element is 1280px. Is that correct?
You probably do not need the overflow properties in the html element, and applying position:fixed to the header is probably unnecessary. Comment out the positioning properties and see for yourself… the header will stay at the top of the page.
The #wrapper around the content is only 1080px wide, so there is a difference in the centering of those elements as the page narrows or is zoomed. If you want the contents of the #header and #wrapper to react the same, they should probably both be given the same width or both put into one container, “#outer”, or something like that, with the fixed with of 1280px.
Lots of “probably’s” here because I’m not sure of your intent, yet.
Give these thoughts a try and see if they are helpful.
Thank you for your quick reply. I changed the wrapper width to the max 1280px that I had set and was very pleased, I guess I got overexcited throwing some unnecessary width's in there. The overflow in the html was redundant too, and was able to take that out no problem.
As far as the header, if I comment out the position:fixed the header sticks to the top of the page and will scroll with the rest of the page as one. The result I am looking for is a fixed header to the top of the window, where everything scrolls underneath of it. This will streamline the headerMenu to be available at all times for easy navigation. I do realize that putting position:fixed on the header breaks it from the content as a whole which is why the main horizontal scroll doesn't scroll the header too when the window is re-sized really small.
I was just wondering if there was any way to remedy the scrolling problem with my intention of having the header and its contents glued to the top of the window with CSS and HTML, or if I will have to find a JQuery solution for it.
Everything you suggested was very helpful, thank you!
I think that the following code does pretty much what you described. There aren’t many changes to your original code.I left several outlines in the code and visible so you can see how things are laid out. Deleting them will have no negative effect on the page. If I missed the ballpark, or if you need additional help, you know where to find us .
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<title>Georgia Rollforming Inc.</title>
<style>
html,body {
padding:0;
margin:0;
}
body {
background:url("images/gradient.jpg");
background-attachment:fixed !important;
background-size:100% 100%;
color:#fff;
font-size:11px;
font-family:verdana,sans-serif;
}
/*======== FIXED HEADER ========*/
#header {
position:fixed;
top:0;
left:0; /* {left:0;} + {right:0;} + {margin:0 auto;} center the fixed header in modern browsers */
right:0;
width:1280px; /* width of #header and #wrapper should be the same */
height:120px;
background-color:#000;
margin:0 auto;
}
#logo {
outline:1px solid red; /* TEST OUTLINE */
float:left;
}
#logo img {
display:block;
border:0;
}
/*======== BILINGUAL NAVBAR ========*/
#bilingualMenu {
outline:1px solid orange; /* TEST OUTLINE */
list-style-type:none;
float:right;
padding:0;
margin:0 20px 0 0;
}
#bilingualMenu li {
outline:1px solid lime; /* TEST OUTLINE */
display:inline-block;
font-weight:bold;
font-size:10px;
font-family:Verdana,sans-serif;
}
#bilingualMenu li a {
display:block;
text-decoration:none;
padding:.5em 1em;
color:#fff;
}
#bilingualMenu li a:hover {
color:#4b4b4b;
}
/*======== END BILINGUAL NAVBAR ========*/
/*======== HEADER MENU ========*/
#headerMenu {
outline:1px solid yellow; /* TEST OUTLINE */
list-style-type:none;
position:absolute;
left:282px;
right:0;
bottom:0;
padding:0;
margin:0;
}
#headerMenu li {
outline:1px solid lime; /* TEST OUTLINE */
display:inline-block;
font-weight:bold;
font-size:15px;
font-family:Verdana,sans-serif;
text-align:center;
}
#headerMenu li a {
display:block;
text-decoration:none;
padding:5px 8px;
color:#895331;
}
#headerMenu li a:hover {
color:#fff;
}
/*======== END HEADER MENU =========*/
/*======== END FIXED HEADER ========*/
#wrapper {
width:1280px;
background-color:rgba(137,83,49,0.3);
padding-top:140px;
margin:0 auto;
}
/*======== TRANSPARENT CONTENT BOX ========*/
#content1 {
width:1000px;
border:1px solid #4b4b4b;
padding:10px 40px 40px;
margin:0 auto 120px; /* Remember, this bottom margin is causing the white space at the bottom of the page */
}
#content1 p {
text-align:left;
font-family:"verdana";
font-size:14px;
font-weight:bold;
color:#fffff0;
}
/*======== END TRANSPARENT CONTENT BOX ========*/
</style>
</head>
<body>
<div id="header">
<div id="logo">
<a href="home.html">
<img src="http://placehold.it/282x120" alt="Georgia Rollforming Logo" width="282" height="120">
</a>
</div>
<ul id="bilingualMenu">
<li><a href="english.html">English</a></li>
<li>|</li>
<li><a href="spanish.html">Espanol</a></li>
</ul>
<ul id="headerMenu">
<li><a href="home.html"> Home </a></li>
<li><a href="capabilities.html"> Capabilities </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="astm.html"> ASTM </a></li>
<li><a href="submittal.html"> Submittal Forms </a></li>
<li><a href="contact.html"> Contact Us </a></li>
<li><a href="about.html"> About Us </a></li>
</ul>
</div>
<div id="wrapper" align="center">
<div id="content1">
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
<p>This is just example text.</p>
</div>
</div>
</body>
</html>
There’s one main thing you need to understand about position:fixed and that is if any part of the element is outside the viewport (either the viewport is smaller than the element (width or height) or the user has zoomed the element larger than the viewport) then the portion that is outside the viewport is unreachable.
The only way to reach fixed content that is outside the viewport is to give the element itself a scrollbar and ensure that the element never actually goes outside the viewport (e.g. width:100%) and therefore you can scroll the content within.
If we take Rons very good demo above as an example you will see that when you narrow your viewport to 800px then 480px of the fixed header is outside of the viewport and totally unreachable. Therefore this is not a very sound way to code a page as it means only people with wide monitors/devices can view the page as intended.
Fixed headers are usually best for small snippets of content (such as a copyright or a few header links) which don;t take up much space and can therefore wrap with the page width quite easily.
In Rons example you could make the header a little more fluid and the nav items will wrap in the smaller viewports (to a degree).
e.g.
#header {
position:fixed;
top:0;
left:0; /* {left:0;} + {right:0;} + {margin:0 auto;} center the fixed header in modern browsers */
right:0;
max-width:1280px; /* width of #header and #wrapper should be the same */
min-height:120px;
background-color:#000;
margin:0 auto;
width:100%;
overflow:auto;
}
You will still need the overflow:auto to enable a scrollbar when a minimum is reached though.
These days you could combine fixed headers with media queries and for large screens you set position:fixed and then for smaller screens you can remove the fixed positioning altogether (mobiles hate fixed positioning anyway).
Suffice to say hat fixed positioning needs a lot of thought before you utilise it
I think for now I will add a scroll bar to the header if in case it does reach a minimum width, as I have visited many sites that have fixed headers that share the same problem. The scroll bar actually doesn’t look extremely tacky in this simpleton website.
Once again thanks for the help, here is what it looks like so far with dead links and without pictures (which will push the text box further down) Sample Website. I know the header and footer menu’s are not exactly centered, but this is the layout look that the person I am designing for wanted it. Also wanted the header black to match the gradient background, but having a hard time getting a logo file that we can manipulate to make it happen lol.
.