Archived topic
Mobile hamburger menu to off canvas panel
16 replies · Started by Ethan on July 13, 2019
I have it set up to switch to a “fake” mobile menu (hamburger) when browser size is reduced to 1010 px. I got CSS to do this via this support forum, and this hamburger menu used to stretch 100% width…but now it doesn’t (it just stays in the upper right corner, maybe since the last update?). Once the “real” mobile menu is activated at even smaller browser sizes, the menu is correctly full-width.
1. What I would REALLY like to do (instead of having the “fake” mobile menu full-width again) is to have the Off Canvas Panel activate at this set px (as well as for the “real” mobile menu) to have the menu slide in/out from the right. But, when I turn it on the Off Canvas Panel in settings, it is totally blank (no items). It also creates the 3-lined hamburger icon BEFORE my set px width. Can you help me change my current “fake” and “real” mobile menus to using the Off Canvas Panel?
I think I have identified the CSS controlling these issues, but I’m not sure how to modify it to get the desired results. Or, once I have the desired results, if I even need any of this CSS!
/* Sets height of area for smaller logo and hamburger menu */
@media (max-width: 1010px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 70px;
}
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 70px;
}
}
/* Activates mobile-style menu at set px and at full width - however, since update, now no longer full width and is at the top right only */
@media(max-width: 1010px ) {
.site-header,
#site-navigation,
#sticky-navigation {
display: none !important;
opacity: 0;
}
#mobile-header {
display: block !important;
opacity: 1;
width: 100% !important;
}
#mobile-header .main-nav > ul {
display: none;
}
#mobile-header.toggled .main-nav > ul,
#mobile-header .menu-toggle,
#mobile-header .mobile-bar-items {
display: block;
}
}
2. Related, but separate layout issue: When it switches to the “real” mobile menu, the logo at the top left is cut off by the top of the screen. I’ve tried adjusting Header Padding (located at Layout → Header → Heading Padding (mobile)), but no value I put in there moves the logo down, which makes me think I have some CSS or something else overriding that.
MANY thanks in advance!
Ok, so sorry - I fixed why it was blank. I needed to assign it in the Menu options. So now the Off Canvas Slider is no longer blank!
However, still:
1. I have not yet activated it, because I still need to remove the 3-lined hamburger icon that appears when the browser size is more than 1010. How can I do that?
2. Is any of the CSS I mentioned no longer needed? Or should I need it still?
3. The related issue of the top left logo being cut off is still occurring.
Hi there,
I'm a little confused but have you try changing the mobile menu breakpoint introduced recently?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
Maybe let's figure this out first before we make more CSS changes.
Let me know :)
Great new options, thanks! I used that Mobile Menu Breakpoint option to force mobile menu to turn on at 1010 px and I was able to remove that second block of CSS with seemingly no ill effects.
The Off Canvas Slider is also working well, but the remaining issues are only then:
1. Remove/hide the 3-lined icon (associated with the Off Canvas Slider) from the main nav menu when browser size is more than 1010 px (in other words, show the 3-lined icon at 1010 px and less only).
2. Top left logo is cut off at the top when site uses the mobile menu.
1. You can do something like this:
@media (min-width: 1100px) {
li.slideout-toggle {
display: none;
}
}2. Can you do this first?
https://www.screencast.com/t/sAZU8h7bUcE
Thanks :)
1. Works great, thanks, this is resolved!
2. I've cleared the cache, I don't have any caching plugins, and I'm running all the current versions.
The code is showing that you are using Wp Super Cache:
https://www.screencast.com/t/Tov1DJG8Sg0a
My sincere apologies, I did not even realize it was there! It is deactivated now.
No problem :)
Can you try adding this CSS as well?
@media (max-width: 1010px) {
.navigation-branding img, .site-logo.mobile-header-logo {
height: 80px;
}
}Yes, that helped push the mobile logo down a bit so it is no longer overlapping the top of the browser window.
Some follow-up tweaks:
1. Is is possible to change the font size of the hamburger menu (3-lined icon) and the word "Menu" to make it bigger, without changing the font size of the other navigation text (in other words, don't change the font size of my nav menu before it goes to mobile menu)?
2. Is it possible to vertically align the hamburger menu and the word "Menu" to the bottom of the white space (right now it seems it is vertically middle aligned)?
1. Try this CSS:
button.menu-toggle {
font-size: 20px;
}2. Not quite sure if I understand. I don't see any white space?
https://www.screencast.com/t/rMakijF3
Re: 1. Perfect solution, thanks!
Re: 2. Check on any other page (besides the homepage) to see the white space. Essentially, I want the bottom of the hamburger menu to align with the bottom of the mobile logo. It previously was bottom aligned, using code from a previous help topic, after running it through this tool (as recommended on the help thread). Not sure why it seems middle aligned now and not bottom aligned, but that's definitely the case.
2. What happens if you disable the mobile header feature?
My guess is that Tom's code here does what you are looking for but the mobile header wasn't activated before:
https://generatepress.com/forums/topic/dynamically-reduce-nav-text-size-full-width-hamburger-items-and-nav-alignment/#post-797763
I just tried it, and unfortunately, disabling the mobile header feature doesn't seem to change the vertical alignment of the hamburger menu. I have always had the mobile header feature enabled.
Give this a shot:
@media (max-width: 1010px) {
.menu-toggle {
line-height: 60px;
align-self: flex-end;
}
}Let me know :)
