Sticky mobile menu

I have the same question. The normal desktop navi is sticky, because it makes sense.
It makes even more sense for mobile devices view, because usually here we have more to scroll. Therefore it would be very useful to have the mobile navi (menu-toggle) always on top while scrolling.
A suggestion would be very appreciated.

I agree, mobile sticky needs to be implemented. I’ve tried my own sticky code and sticky plugins, but there’s always some sort of conflict with the already in place sticky desktop nav.

Any solution for this?

My solution so far is the following css:

@media screen and (max-width: 767px) {
.navigation-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
}
.admin-bar .navigation-top {
padding-top: 45px; // Padding to allow space for the admin-bar when present
}
}

Some additional css may be required to move the content down, as the navigation menu covers the top most part of the header.

Let me know if this works.

Thanks for the quick reply and solution!
It works quite well except for the fact that the menu doesn’t close itself after tapping on an item. Instead you have to tap on “Menu” again to close it. How can it be closed automatically together with tapping on a menu item?

I actually implemented this yesterday! To close the menu on a link click I used jquery. (Let me know if you’re not familiar with jquery and I’ll try to help further).

I added the following to a custom .js file that I’m using.

$(‘#top-menu li a’).click( function(){
$(‘#site-navigation’).attr(‘class’,’main-navigation’);
});

Great, that works as expected. Thanks a lot!
Do you also know how to display the menu button only in the top right corner (like a shrinked down version) and to leave the rest of that area transparent?

In the css I provided earlier, remove “left:0;”

Glad things are working out.

Thanks a lot again, much appreciated!

Sorry to ask you again but I have a minor issue left: For the desktop navigation I use the following jQuery code:

  jQuery( "h2.entry-title" ).each( function() {
    var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-");
      jQuery( this ).wrapInner(function() {
        return "<span style='padding-top:96px;' id='" + panelId + "'></span>";
      })
  })

Now with the mobile optimisations and the menu only in the top right corner I would like to perform the same code but with less padding-top on a mobile device.
How can I add different padding-top dimensions based on the device dynamically?
Thanks in advance!

Instead of returning style=’padding-top:96px;’ in jquery I would use css and media inquiries.

For example, here’s for a large viewport:

@media screen and (min-width: 768px) {
  h2.entry-title span {
    padding-top: 96px;
  }
}

For anything smaller:

@media screen and (max-width: 767px) {
  h2.entry-title span {
    padding-top: 40px;
  }
}

So delete “style=’padding-top:96px;'” from jquery and add the css. I hope I understood your question correctly.

Thank you so much @rfortin, working perfectly!

I have updated the css for the menu, but what file do I inject the jquery code into?

Here’s a quick tutorial for .js coding.

Assuming you’re using a twentyseventeen child theme, I’d suggest creating your_custom_js_file_name.js in wp-content/themes/twentyseventeen-child/js/ (if a js folder doesn’t exist, do create it).

The code would look like this:

(function($) {

$(‘#top-menu li a’).click( function(){
$(‘#site-navigation’).attr(‘class’,’main-navigation’);
});
// All future jquery code can go in here

})( jQuery );

Then, in your child theme’s functions.php,

/*************************** Custom js ***************************/
function my_custom_js() {
    wp_enqueue_script( 'your_custom_js_file_name', get_stylesheet_directory_uri() . '/js/your_custom_js_file_name.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_js' );

Don’t forget to change “your_custom_js_file_name” to whatever you name your .js file. Good luck!

@rfortin,

Thanks, works like a gem!
I have one addition that I would like to do.
https://www.kylecblanchard.net/

I have a search currently under the header at above site. Is there a way to make sticky the search under the sticky menu, both at the top?

Thanks in advance,
Kyle

Try adding the following code in your custom js file:

$('#search-container').detach().appendTo('.navigation-top .wrap');