Make WordPress Core

Opened 6 years ago

Last modified 6 years ago

#40236 new enhancement

Twenty Seventeen: Sticky Menu

Reported by: dem0nstar's profile dEM0nsTAr Owned by:
Milestone: Awaiting Review 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 (4)

#1 @SergeyBiryukov
6 years ago

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

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

Note: See TracTickets for help on using tickets.