Sticky Navigation

Hi jarethc,

Sticky.js is a pretty simple jQuery plugin that should fit your purpose, if you have some basic coding knowledge. Include it in the theme and select the navigation element in global.js, and it should work without a hitch.

Let me know if you need more detailed instructions.

Hi Anders,

Thanks for that, I had a bit of a play around but still cant seem it get it working. I have uploaded jquery.sticky.js and have added this to the functions.php:

wp_enqueue_script(‘sticky’, get_template_directory() . ‘/js/jquery.sticky.js’);

Then I added this to the header.php:
<script>
$(window).load(function(){
$(“.nav-toggle”).sticky({ topSpacing: 0 });
});
</script>

Not sure if I’m close or way off.
What do you mean by select the navigation element in global.js?
Any help would be appreciated.

Cheers
Jareth

Hi jarethc,

You would need to add the following code to functions.php:

wp_register_script( 'hemingway_sticky', get_template_directory_uri().'/js/jquery.sticky.js', array('jquery'), '', true );

wp_enqueue_script( 'hemingway_sticky' );

Make sure you enqueue hemingway_sticky before global.js. Next, add the following code to global.js:

$(window).load(function(){
$(".navigation").sticky({ topSpacing: 0 });
});

If you do that, the navigation section should stick to the top when you scroll past it.

Hey Anders,

Just needed to make the width 100% and it worked perfectly!
Thanks for all the help!

Cheers
Jareth

Hey Anders,

I’m trying the same thing as well and not getting any results. My site is digitalgumdrop.com. I added jquery.sticky.js along with a new copy of global.js in the /js directory on my child theme. The global.js has the code

// Sticky Menu
    $(window).load(function(){
    $(".navigation").sticky({ topSpacing: 0 });
    });

added to the top, right underneath jQuery(document).ready(function($) {

Then I adjusted my functions.php to this where sticky was enqueue first:

// Enqueue Javascript files
function hemingway_load_javascript_files() {
if ( !is_admin() )
	    wp_register_script( 'hemingway_sticky', get_template_directory_uri().'/js/jquery.sticky.js', array('jquery'), '', true );
wp_enqueue_script( 'hemingway_sticky' );
	wp_register_script( 'hemingway_global', get_template_directory_uri().'/js/global.js', array('jquery'), '', true );
		wp_enqueue_script( 'hemingway_global' );
}

After that, the menu bar still disappears. I have made other tweaks to bar including:

/* Center Main Menu Text */

ul.blog-menu {
	text-align: center;
}

.blog-menu > li {
	float: none;
	display: inline-block;
	}

I tried the routine on a fresh version of the theme and it works. Is there anything you might be able to suggest for my child theme?

Thanks for your time.

Update,

I commented out the main menu text code and it worked. I then uncommented the code and it all works except for a few glitches. When the sticky activates, the text jumps left, and the bar width decreases. Finally on the scroll, the featured photos, sticky icon, and search widget all show up on top of it. Jarethc mentioned he needed to make the width 100% and it was perfect, but I can’t seem to figure out where to make that adjustment.

Any help is appreciated. Thanks for the epic theme.

Hi Tr0nlives,

In the ‘2.Structure’ section of style.css change:
.content { width: 65%; }
to
.content { width: 100%; }

Hopefully that works.

Cheers
Jareth

P.s. I am also having the same issue with the sticky navigation bar going behind a contact form. Seems to only happen with certain elements.

Cheers
Jareth

Hey Jarethc,

I was able to fix that issue by adjusting the z index of the item to a number higher then all other items. I set it to 20 to make sure it was more then all.

.section.no-padding { padding: 0; width:100%; z-index: 20;}

Hi Tr0nlives,

I did the same thing that you wrote down here and it works correctly in desktop but not in mobile browser (Android Firefox). It won’t be sticky in mobile and can’t open the nav. I also checked your site in my mobile browser and it works.
I’m asking if you did anything else that you wrote down here.

Thank you for your reply!
Bence

ps: site is https://muzli.hostoi.com/