View Full Version : Top floating navigation.

06-13-2010, 08:40 PM
Hi. I am new to this and wondering if somebody could point me in the right direction. I hope this is in the right section but if not please feel free to move it.

I am looking to have a navigation menu at the top of a website that stays at the top even if you scroll down.

Here is a link to the type of thing I am looking for: http://videolightbox.com/ (http://www.videolightbox.com/)

As you can see the navigation menu stays in one place and the rest of the page appears to move behind it. Needless to say I want to be able to put my own links and the icons/links for other languages can stay. I would prefer, if possible, to have one script that I would call upon on every page that I use it.

Thank you in advance.

06-14-2010, 01:22 AM
This site is using the following bolded CSS declarations to achieve the fixed navigation:

#mainheader {
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-image: url(../img/header-bg.png);
margin-left: 0px;
background-repeat: repeat-x;
margin-top: 0px;
padding: 0px;
height: 61px;
color: white;
width: 100%;

06-14-2010, 05:31 PM
Thanks for that, but it doesn't help me.

As I said I'm new to all this so I don't know how to implement that.

It would be better (for me) if somebody could make a sample page(s) (with or without external css, whichever way is best) and post it here.

Thank you and I'm sorry if I'm being a pain.

06-14-2010, 05:51 PM
Hello ZeroHacker,
I use a similar top menu on a lot of my HTML/CSS example pages. Have a look at the source code and CSS on http://nopeople.com/CSS/h_ul_menu-with_images/index.html

I would prefer, if possible, to have one script that I would call upon on every page that I use it.

After you get your top menu working the way you want it would be easy to make it a .php include. Here's a simple tutorial for that - http://www.tizag.com/phpT/include.php

06-14-2010, 06:03 PM
Copy/Paste this bit into a new .html document and see if that's what you're looking for -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://www.nopeople.com/design" />
<title>top menu demo</title>
<style type="text/css">
html, body {
background: #9C9;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
color: #000;
* {
margin: 0;
padding: 0;
#hdr {
width: 100%;
min-width: 900px;
line-height: 48px;
overflow: auto;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 999;
#back {
width: 60%;
float: left;
display: block;
color: #fff;
ul#links {
margin: 0 0 0 60%;
list-style: none;
ul#links li {
padding:0 15px;
ul#links li a {color: #fff;}
#hdr a:hover, #hdr a:active {color: #f00;}
#container {
height: 1000px; /*for demo only*/
width: 900px;
margin: 60px auto;
border: 2px solid #f00;
<div id="hdr">
<a href="http://nopeople.com/design/CSS tips/index.html" id="back">Back to CSS Tips</a>
<ul id="links">
<li><a href="#preview" rel="" id="anchor1" class="anchorLink">PREVIEW</a></li>
<li><a href="#html" rel="" id="anchor2" class="anchorLink">MARKUP</a></li>
<li><a href="#css" rel="" id="anchor3" class="anchorLink">CSS</a></li>
<!--end hdr--></div>
<div id="container">
<h1>Your website goes here</h1>
<!--end container--></div>