WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 15 months ago

#40236 new enhancement

Twenty Seventeen: Sticky Menu

Reported by: dEM0nsTAr Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords:
Focuses: ui, template Cc:

Description

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

#1 @SergeyBiryukov
15 months ago

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

#2 @afercia
15 months 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.

https://cldup.com/Al-oOId4VE.png

#3 @dEM0nsTAr
15 months 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(){
  $(‘#site-navigation’).attr(‘class’,’main-navigation’);
});

#4 @sami.keijonen
15 months 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.

Note: See TracTickets for help on using tickets.