Twenty Seventeen: Sticky Menu

[dEM0nsTAr]

The mobile menu on the Twenty Seventeen theme should be sticky/fixed at the top while scrolling and when tapping on an item from the menu the menu should be closed automatically instead of tapping again on "Menu".

Here is a CSS snippet for the first part of the request, thanks to @rfortin:

@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
}
}

[afercia]

@dEM0nsTAr thanks for your feedback and welcome to Trac. I'm not sure making the menu sticky on mobile would be ideal, since when the menu has a lot of items it would then be impossible to actually scroll it and see all the items (see screenshot below, with the suggested CSS applied).

Not sure I fully understand the second issue, the themes team can answer far better than me I guess. I'm going to remove the accessibility focus since it seems to me this is not related to accessibility issues.

[dEM0nsTAr]

Thanks for the hint with the scrolling @afercia ! Maybe there is a better solution to this but I still like the idea of a sticky/fixed navigation on top for a mobile device. Without "left: 0;" it even appears only in the top right corner.
For the second issue I meant something like this jQuery approach:

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

[sami.keijonen]

Hi @dEM0nsTAr. I think menu not being sticky on smaller screens is just a design decision. But you could certainly do that via child theme.