Wed, 2014-03-26 01:37
Hi CSS pro's,
I want to convert the nav bar of my site to a sticky nav bar. Here is the website www.tommosoutdoorproducts.com.au
In the style.css style sheet I have changed the
#mainHeader {
background: none repeat scroll 0 0 #111111;
min-width: 100%;
padding: 20px 0;
}
to
#mainHeader {
background: none repeat scroll 0 0 #111111;
min-width: 100%;
padding: 20px 0;
position:fixed;
}
This seems to keep the nav bar up the very top every time I scroll which is great, except for the "PRODUCTS" page where the nav bar is placed over the content. I would like the Sticky Nav Bar at the very top like every other page.
Please help
Regards,
Austin
Wed, 2014-03-26 06:59
#1
This does not seem to be
This does not seem to be happening on my browser.
I have tested your website on Internet Explorer and Google Chrome (sorry could not test it on Firefox at the moment), but the menu is just like every other page at the top right of my screen without moving.
No menu on your content here 
So I guess you solved it in the meantime?
Wed, 2014-03-26 08:26
#2
Hey helldog2004, Firstly
Hey helldog2004,
Firstly thanks for replying.
I guess I was not very clear with my first message. The website (www.tommosoutdoorproducts.com.au) navbar is currently set to:
#mainHeader {
background: none repeat scroll 0 0 #111111;
min-width: 100%;
padding: 20px 0;
}
So scrolling is fine, as it would on a normal page. However, when I change it over to a stickybar by using the property position:fixed; & z-index:9999; the nav sticks to the veryyy top on every page except the "product page". On the product page it looks as if there is an offset of about 'x' pixels. And that is what I want help with fixing.
Cheers,
Austin
Wed, 2014-03-26 15:44
#3
top
Try this:
#mainHeader { background: none repeat scroll 0 0 #111111; min-width: 100%; padding: 20px 0; position: fixed; top: 0; z-index: 2; }
Don't forget to give the following element some margin-top. Move the slider into the maincontent and put the margin on that.
cheers,
gary