[Resolved] Mobile hamburger menu to off canvas panel

Home Forums Support Mobile hamburger menu to off canvas panel

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #957015
    Ethan

    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!

    #957017
    Ethan

    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.

    #957130
    Leo
    Staff
    Customer Support

    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 🙂

    #957756
    Ethan

    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.

    #957804
    Leo
    Staff
    Customer Support

    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 🙂

    #957943
    Ethan

    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.

    #957953
    Leo
    Staff
    Customer Support

    The code is showing that you are using Wp Super Cache:
    https://www.screencast.com/t/Tov1DJG8Sg0a

    #961580
    Ethan

    My sincere apologies, I did not even realize it was there! It is deactivated now.

    #961618
    Leo
    Staff
    Customer Support

    No problem 🙂

    Can you try adding this CSS as well?

    @media (max-width: 1010px) {
        .navigation-branding img, .site-logo.mobile-header-logo {
            height: 80px;
        }
    }
    #966486
    Ethan

    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)?

    #967071
    Leo
    Staff
    Customer Support

    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

    #967460
    Ethan

    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.

    #967483
    Leo
    Staff
    Customer Support

    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

    #967525
    Ethan

    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.

    #968016
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    @media (max-width: 1010px) {
        .menu-toggle {
            line-height: 60px;
            align-self: flex-end;
        }
    }

    Let me know 🙂

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.