Opened 6 years ago
Last modified 6 years ago
#40236 new enhancement
Twenty Seventeen: Sticky Menu
Reported by: |
|
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
@
6 years ago
- Summary changed from Sticky Menu in Twenty Seventeen to Twenty Seventeen: Sticky Menu
#3
@
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(){ $(‘#site-navigation’).attr(‘class’,’main-navigation’); });
Note: See
TracTickets for help on using
tickets.
@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.