How do I do a sticky navigation menu in a responsive theme?

JavaScript
1

The WP responsive theme I’m working on:

http://www.wpexplorer.me/tetris/

I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will immediately see – without having to upload the theme on your WP account – that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.

I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it’s all out of whack. I can’t get the sticky header for this theme to function or do right. Oh, I’ve also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don’t give me issues.

Adding the width: ; code to the #main-content doesn’t seem to help either (which I read somewhere online that this was where the width code goes).

Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?

I really would like my menu bar to function like this site’s sticky navigation menu:

http://teothemes.com/wp/scrn/

Notice how as you scroll down everything above the menu goes out of site, but when the menu bar gets to the top of the page, it stops and becomes a sticky/fixed menu bar and the rest of the content on the page goes behind it and out of site as you continue scrolling down. How do I get this Tetris theme to do this and also without going haywire when the responsive feature kicks in?

Thanks.

2

Hi DZynd4U,

Welcome to the forums!

This is really two questions in one.
I’ll do my best to answer the JavaScript part for you.

To make an element sticky, but only when a user scrolls past it and it reaches the top of the viewport, you would attach an event listener to the window.scroll event.

Here’s some code (you’ll need jQuery) which adds a CSS class to an element when it reaches the top of the viewport and removes it when a user scrolls back the other way:

// Cache selectors outside callback for performance.
var $window = $(window),
$stickyEl = $('#the-sticky-div'),
elTop = $stickyEl.offset().top;

$window.scroll(function() {
  $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});

You would then have to style the element accordingly using CSS to make it stick in place.

If I was you, I’d get this working, then head over to the CSS forum and ask for help with the styling.

Reference: http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it

3

Thanks Pullo!!