I need to make a floating header for my website ,
If i can get ready baked code that would be better
thanks in advance
It's not a big thing if you have basic understanding of CSS layouts. But I would suggest before doing any changes/experiments with your CSS files live, have a back up ready in case of any mishaps.
Few things you need to know before changing CSS codes
- Position keyword in CSS3
- Float keyword in CSS3
- Z-index in CSS3
Suppose you header is horizontal (assuming) and you wish to show you at the top always even users browse the content by scrolling down your web page.
Just include all the menu contents in a div tag and define the CSS property of that div tag to make it a floating header.
<title> Z index and position out lay </title>
Other contents with different div tags usually
It will work for sure but you need to make sure that it gets adjusted with other div tags positions. Else you may need to edit more tags specially to make positions at proper place. and that is nothing but position keyword which has four values:
Remember z-index plays an important role in displaying the header part at the top of other contents. always provide highest z-index positive value to it as compared to other tags
P.S. For your website i.e. deadmango.com you need to change your CSS property under #nav tag like
But remember you may need to make some adjustments with position layout with other tags also. So, be careful boy :P
If you would find that , then you can implement in similar way....
I am not at my system, else I would have found that tag and would have sent you the sample code :D
Sorry for being late here.
I saw your website....
The layout is based on div tags which is something like this :
Now You are looking for nav2 tag. I tried with position:fixed, z-index: any positive value. It worked
But my question is do you want to make nav, header and nav tags fixed so that on scroll all those contents under these three tags will be constant?
If, so. (That's what I feel will be feasible) Then you need to work on those three tags altogether and have to put position's attribute properly.
Note: Everywhere position:fixed may not give you a solution.
- nav2 is corelated with other top div ids
- on scroll it will be fixed but two div tags above it will not be fixed o nscroll which will give bad look to the current theme
- Either fix those three tags, so that on scroll headers will be fixed with primary menu link, title name, and secondary menu link
- or Put the secondary menu link (div tag) above the header, so that both primary and secondary will be together and you can make them fixed