Skip to main content

How to make a floating header

10 replies [Last post]
Offline
Joined: 22 Feb 2011
Hi ,
I need to make a floating header for my website ,
can ayone explain it to me or point out what to toggle wth javascript/css/html
If i can get ready baked code that would be better

thanks in advance
sanjeev's picture
Offline
Joined: 21 Feb 2011
CSS would alone help you to do that
Hi Sunny,
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
Positioning and floating are the amazing things in CSS which can help you in developing an awesome tableless website :)
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.

  1.  
  2. <html>
  3. <head>
  4. <title> Z index and position out lay </title>
  5. <style type="text/css">
  6. #top-menu{
  7. z-index:5;
  8. position: fixed;
  9. width: 100%;
  10. background-color: #000;
  11. color: #F00;
  12. margin-top: -10px;
  13. #top-menu li{
  14. display: inline;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="top-menu">
  20. <ul>
  21. <li>Testing1</li>
  22. <li>Testing2</li>
  23. <li>Testing3</li>
  24. <li>Testing4</li>
  25. <li>Testing5</li>
  26. </ul>
  27. </div>
  28. Other contents with different div tags usually
  29. </body>
  30. </html>


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:
  • fixed
  • relative
  • absolute
  • static

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

  1.  
  2. #nav{
  3. some attributes
  4. z-index:10;
  5. position: fixed;
  6. }

But remember you may need to make some adjustments with position layout with other tags also. So, be careful boy :P

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Offline
Joined: 22 Feb 2011
thanx
Will try to implement this and update you
TreeLine Homes (not verified)
Floating Header
I also have the same problem. It is hard for me since I am not really experienced or well knowledgeable about CSS. The guide is really useful and detailed. Thanks you also.
sanjeev's picture
Offline
Joined: 21 Feb 2011
Re: floating header
Nice to know that this demo example helped you.

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Offline
Joined: 22 Feb 2011
how to
I have a little diff req now I want to make the  topics element ' sposition fixed and floating


deadmango float bar
sanjeev's picture
Offline
Joined: 21 Feb 2011
find the id tag and do the same :)
Can you please let me know under which id tag your topic element belongs to..
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

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Offline
Joined: 22 Feb 2011
under   # nav 2 problem is
under   # nav 2
problem is making it static
position:fixed 

makes it floating but it overlaps with others .

sanjeev's picture
Offline
Joined: 21 Feb 2011
You need to take care of the layout
Hi Sunny,
Sorry for being late here.
I saw your website....

The layout is based on div tags which is something like this :
<div id="page">

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Offline
Joined: 22 Feb 2011
sir I only want nav2 part
sir I only want nav2 part floating and on top
basically i want  to give users quick access to other fields

sanjeev's picture
Offline
Joined: 21 Feb 2011
nav2 alone may create problem
Ah I got you, but I doubt, it will work the way you visualised it.

Reasons are:
  • 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
Solution,
  • 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
Other than that, I feel it will not be good for the user and lots of trouble will be on the way.

Follow us at :
Facebook | Twitter
########### Give me the right place to stand, I shall move the earth. #################

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.