3 replies [Last post]
Austin101
Austin101's picture
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT+10
Joined: 2014-03-26
Posts: 2
Points: 3

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

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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 Smile
So I guess you solved it in the meantime?

Check Maximum Webdesign for your online solutions

Austin101
Austin101's picture
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT+10
Joined: 2014-03-26
Posts: 2
Points: 3

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.