How to make a sliding header

HTML & CSS
1 
<div style="background:#000; color:#fff; top:0px; width:100%; height:50px;">TEXT</div>

I use this code on my website to make a header. but I want the header to slide when scrolling down. As like on facebook, google plus… any ideas?

Thanks in advance.

2

Try adding fixed position and a z-index:

<div style="background:#000; color:#fff; top:0px; width:100%; height:50px; [b][color="#FF0000"]position:fixed; z-index:20;[/color][/b]">TEXT</div>

The z-index is just so that "American Express… " doesn’t overlap.

3

If I understood you correctly, you’ll have position it to the top.

you may try

.class or #id (of the div){
position: relative;
left: 0;
right: 0;
top: 0;
}

4

Hi,

If you want a “fixed header” then as zot said you will need to use position:fixed as described. However you will need to make sure that the first element on the page has some margin or padding so that it is not initially obscured by the fixed header. Luckily your page container already has quite a big margin-top so you should be ok unless you want it increased to match the original gap from the top.

A bigger issue is that you have added the div above the html5 doctype and will send ie9 and under into quirks mode and behave much like IE5!! In quirks mode those browsers won’t understand fixed positioning so you need to restore your html5 doctype to the top of the document and move that div into the body.

So change this section:


<div style="background:#f9f9f9; text-align: center; color:#727272; top:0px; width:100%; height:45px;"><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>
<!DOCTYPE html>

To this:


<!DOCTYPE html>

and then move that div into the body:


</head>
<body class="home blog custom-background custom-font-enabled single-author">

[B]<div style="background:#f9f9f9; text-align: center; color:#727272; top:0px; width:100%; height:45px;"><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>[/B]

<div id="page" class="hfeed site"> etc...

It would also be better to move that inline css to the end of your main stylesheet.

e.g.
html:


<div [B]class="fixed-top"[/B]><a href="http://2hinsurance.com/"><img class="alignnone size-full wp-image-8" alt="travelers home insurance" src="http://2hinsurance.com/wp-content/uploads/2013/05/travelers-home-insurance1.jpg" width="450" height="40" /></a></div>

CSS:


.fixed-top{
	background:#f9f9f9; 
	text-align: center; 
	color:#727272; 
	position:fixed;
	left:0;
	z-index:99;
	top:0; 
	width:100%; 
	height:45px;	
}
5

Thus far, Zot’s answer comes closest.

If want is your masthead (header) to ‘stick’ to the to even when the window scrolls then you need to give that element position:fixed; and top:0

Since giving an element position:fixed; causes it to shrink wrap, you will need to add width:100%

here is the tricky part:

position:fixed; takes the element out of the normal flow; is as if other elements dont even know it’s there. this means you MUST MAKE SPACE FOR IT SOMEHOW.

so we need to make the element a explicit height also, and give the next element THAT EXACT amount of in padding-top/bottom or margin-top/bottom

just to make things air-tight, we give the masthead element a large z-index, in case we ever need to AP/RP/FP any other element in the page.

so in the end , something like this :

#mastheadDiv{top:0px; width:100%; height:50px; position:fixed; z-index:10000;}
#page {padding-top:50px}

You need to rethink your code, you have HTML OUTSIDE the BODY tag!!! Before the doctype, even!!! BAD and BAD enough to begin with. Put the div within the body tag, one of the advantages of position fixed, is that it will display wherever you tell it to, regardless of where in the source the actual element is coded. We can achieve the effect we want w/o having to write poor HTML

Hope that helps.

Edit: well, Paul snuck in there and beat me to the punch. That’s what I get for taking a lunch mid way through replying to a post.

6

lol - sorry Ray. I didn’t see you eating in the corner there :slight_smile:

7

Thank you guys your posts were really helpful :slight_smile: