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.

[poena]

I agree that this is a design decision for the theme, and there are no plans to make the mobile menu sticky.

In my test, the menu is closed automatically when a menu item is selected.
I tested on macOS in Chrome using the browser developer tools, and on an Android phone, also using Chrome.

I am closing this issue as wontfix.
If there are any more details about how to reproduce the issue with the menu not closing when an item is selected, the ticket can be re-opened.