[Resolved] Adding the text “MENU” beside mobile animated hamburger

Home Forums Support Adding the text “MENU” beside mobile animated hamburger

  • This topic has 11 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1355688
    oceansurf99

    Hey guys,

    New to your theme and really enjoying it so far, but I ran into a minor thing with the animated hamburger code.

    I used the code from here to build an animated hamburger menu, and it works great, thanks for putting up this article:
    https://docs.generatepress.com/article/animated-hamburgers/

    But, I’d like to add the word “MENU” to the right of the hamburger (and for it to be within the clickable region, too).

    I tried adding the word “MENU” to the code, like this, and then styling it:

    <div class="hamburger hamburger--squeeze">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div><div class="hamburger-inner-menu">MENU</div>
        </div>
    </div>

    Only trouble is that I’ve had issues positioning it after having added it.

    I tried a bunch of things and got it about 90% of the way there, but it just isn’t quite where I’d like it to be.

    Specifically:
    – Hard to get the text (“MENU”) to sit flush right across all mobile device sizes.
    – Would like the entire word to be within the “padding” (clickable area) of the button (the button with the “.menu-toggle” class assigned to it).
    – I also would like it so the clickable area of the button is flush right to the side of the browser window, if possible, please.
    – Trouble positioning the entire menu so it is “indented” the exact same amount from the right-hand side as the site title is on the left-hand side, across all devices screen sizes. Right now they are off by a few pixels.

    Hopefully I’m making sense. Any help is appreciated.

    Thanks.

    #1355810
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It may be easier to use the text that’s already there (it’s just hidden):

    .menu-toggle .mobile-menu {
        display: inline-block;
        padding-left: 0;
    }

    You’ll want to undo the existing padding stuff you added to the original code, then you may need to move the .mobile-menu class around a little so it aligns perfectly.

    Let me know 🙂

    #1355861
    oceansurf99

    Hi Tom, thanks.

    Ok, I got rid of the “MENU” div and the padding that I’d added, and am trying to style the existing “MENU”.

    I just want it to centre the MENU text vertically and make it be a font size of 16px.

    I changed the width of .hamburger-box to be 20px (from 40px) and margin-right to be 10px (from 30px), which brought the hamburger closer to the “MENU” text.

    Then I changed the font-size of .menu-toggle .mobile-menu to be 16px.

    The result is the hamburger appears to be vertically aligned centre, which is good, but the MENU text is a bit too high.

    I’ve been trying a few things, but I’m still having trouble making that MENU text be vertically centre-aligned. Every time I increase the padding-top for it, it pushes the site title and hamburger down as well as the MENU text. How can I target that MENU text independently of those and get it vertically centre-aligned and in-line with the hamburger?

    There’s also a space beneath the navbar now, of 1 or 2 pixels, revealing the image behind it, due to the padding-top: 3px; I added to .menu-toggle .mobile-menu in an attempt to push “MENU” down. I left it there to show you.

    After that I’ll try to make the left/right spacing be consistent with the site title on the left so everything looks even.

    Any ideas?

    Thanks.

    #1356368
    David
    Staff
    Customer Support

    Instead of adding padding to the top of the toggle – use relative positioning to align it:

    .menu-toggle .mobile-menu {
        display: inline-block;
        padding-left: 2px;
        font-size: 16px;
        font-weight: 600;
        position: relative;
        bottom: -2px;
    }
    #1357004
    oceansurf99

    Thank you, David, that worked great.

    Any advice on how I might be able to more reliably line up the left-hand Site Title (spacing from the left side) and the right-hand Nav Menu (spacing from the right side) across all device screen sizes? Just want them to be the same distance from the edges, basically.

    Right now I’m hard-coding (using margin-left in .navigation-branding, and padding in menu-toggle). Is there a better way to do this so that it more properly aligns and is a bit more “automatic”, like relative / or percentage to the device screen size, etc? Or better selectors to style for this?

    #1357266
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try this:

    .main-navigation.has-branding {
        padding: 0 20px;
    }

    You can change that value to whatever works for you (% etc..).

    #1357272
    oceansurf99

    Thanks, Tom, I’ll try that.

    You know, after trying David’s suggestion from earlier today, I noticed a 1 pixel line right beneath the nav when you expand the menu. I’d run into that a few times when I was trying to move the menu text around, too. How can I get rid of that?

    #1357280
    oceansurf99

    Actually, the 1 pixel line seems to come from changing the font size in .menu-toggle .mobile-menu to 16 from 12, that makes the container larger and pushes the menu down 1 pixel, apparently.

    #1357355
    oceansurf99

    I actually got it to vertically centre both the MENU text and the hamburger with vertical-align: middle:

    .menu-toggle .mobile-menu {
        display: inline-block;
        padding-left: 2px;
        font-size: 16px;
        font-weight: 600;
        vertical-align: middle;
    }

    But the 1 pixel line remains.

    If you inspect .mobile-menu, you’ll see it is visibly pushed down by a pixel, and the button (.menu-toggle), has a height of 61 pixels instead of 60.

    But then I removed the line-height from the theme’s .menu-toggle in the inspector tool, and that fixed it (it was too high for a nav bar of 60px, like mine):

    .menu-toggle {
        padding: 0 20px;
        /* line-height:60px; */
        margin: 0;
        font-weight: 400;
        text-transform: none;
        font-size: 15px;
        cursor:pointer
    }

    So, I then overrode the line-height in my CSS:

    .menu-toggle .mobile-menu {
        display: inline-block;
        padding-left: 2px;
        font-size: 18px;
        font-weight: 600;
        vertical-align: middle;
        line-height: 20px !important;
    }

    And that seems to fix it, because that line-height was making the button bigger. I can also now apply a larger font-size, 18px.

    There’s still padding to the right of the button (MENU/hamburger) of about 20px, from the theme, which I can’t easily remove, so I compensated for it on the left side of the Site Title, to get them both evenly spaced from each side. Unless you guys have any other suggestions regarding this?

    #1358137
    Tom
    Lead Developer
    Lead Developer

    The menu toggle does have an extra 20px of padding on the right of it to make the tap target larger. You could overwrite that with CSS, or you can simply remove the padding-right on the navigation element on mobile so the 20px is handled by the button itself.

    Of course, the way you’ve done it works as well 🙂

    #1358269
    oceansurf99

    Ok, thanks again.

    #1358402
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.