Make WordPress Core

Opened 7 years ago

Closed 4 months ago

#40236 closed enhancement (wontfix)

Twenty Seventeen: Sticky Menu

Reported by: dem0nstar's profile dEM0nsTAr Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords:
Focuses: ui, template Cc:


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

Change History (5)

#1 @SergeyBiryukov
7 years ago

  • Summary changed from Sticky Menu in Twenty Seventeen to Twenty Seventeen: Sticky Menu

#2 @afercia
7 years ago

  • Focuses accessibility removed

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

#3 @dEM0nsTAr
7 years ago

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(){

#4 @sami.keijonen
7 years ago

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.

#5 @poena
4 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.