0

Currently I am working on a page that has a top banner followed by a top navigation bar. I am making it so that when you scroll down past the navigation bar - the navigation bar becomes fixed. This works however when the nav becomes fixed, the rest of the website content pushes up as the navigation bar is no longer a block element.

Is there a way to make the navigation bar fixed while retaining the position or content of the page in the same location?

4
  • Seeing that you are new...Please add some relevant code or add to JSfiddle Sep 23, 2013 at 16:48
  • updates.html5rocks.com/2012/08/…
    – Quentin
    Sep 23, 2013 at 16:49
  • Very superficial question, please add some resource with an example of it(e.g. in jsfiddle.net) Sep 23, 2013 at 16:49
  • you could make the navigation bar position absolute and give the content of the page a margin-top as the same height as the navbar
    – Chanckjh
    Sep 23, 2013 at 16:50

2 Answers 2

0

Set the margin-top of the div with the rest of the website equal to the height of the navigation bar + margin-top of the navigation bar (since there is a banner)

0

What sort of script are you using to switch the positioning of your navigation? I've used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/) with success. Maybe you could use that, or check out how they address your issue. It seems like they add a wrapper around the "sticky element", which prevents the content from shifting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.