[Resolved] Align mobile menu items

Home Forums Support [Resolved] Align mobile menu items

Home Forums Support Align mobile menu items

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #749968
    Shawn

    Hi,
    I want the nav menu items to be aligned in the middle of the screen on mobile (especially on a phone). I’d like X MENU to be centered and the individual page names flush left to it.

    #749975
    Shawn

    The url isn’t showing despite clicking on link. If you view the site on a phone, you’ll see what I’m referring to.

    Thanks.

    #750185
    Leo
    Staff
    Customer Support

    Hi there,

    If I understand this correctly, it might be easier to use the site header on mobile.

    Can you try replacing this CSS:

    .site-header {
        display: none;
    }

    with this:

    @media (min-width: 769px) {
        .site-header {
            display: none;
        }
    }
    #750504
    Shawn

    Hi Leo,

    The code you suggested doesn’t fix the alignment–I cleared browser cache on Chrome & Firefox but it appears the same as before.

    Regards,
    Shawn

    #750727
    Leo
    Staff
    Customer Support

    That was only the first step.

    Next can you upload the logo through Site Identity?
    https://docs.generatepress.com/article/adding-header-logo/

    Then I’ll have another look.

    Let me know πŸ™‚

    #750758
    Shawn

    I can but now I have two logos, as one was added about a month ago using instructions I received from GP tech support. The logo I added via Site Identity doesn’t center on mobile, which I want it to do.

    #750783
    Leo
    Staff
    Customer Support

    The logo added in Site Identity should be center by default and looks like it is.

    Add this CSS to hide the navigation logo on mobile:

    @media (max-width: 768px) {
        .site-logo.navigation-logo {
            display: none;
        }
    }

    Then we should just need a bit more CSS to center the toggle.

    Let me know πŸ™‚

    #750799
    Shawn

    Thanks.

    Added the code, now just one logo is displaying. There’s a large amount of white space between the logo and the X MENU text. X MENU appears slightly to the right instead of being centered horizontally in the phone screen. The pages text below X MENU are too far to the left of X MENU.

    #750832
    Leo
    Staff
    Customer Support

    Reduce the header padding here: https://docs.generatepress.com/article/header-padding/

    Then add this CSS:

    @media (max-width: 768px) {
        .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
            float: none;
        }
        .inside-navigation {
            text-align: center;
        }
    }
    #750892
    Shawn

    Reduce heading padding but still a lot of space between logo and X MENU. I need to enlarge the logo for mobile view so I’ll leave spacing alone for now.

    The X MENU isn’t centered horizontally left to right. If you go to the ABOUT page, you’ll see what I’m referring to.

    Thanks.

    #750965
    Leo
    Staff
    Customer Support

    So here you can see where is spacing is coming from:
    https://www.screencast.com/t/AqXsqPAqsuu

    Reduce the padding should definitely work. You might want to crop the logo image again so there is less white at the bottom too.

    I have adjusted the CSS above too:
    https://generatepress.com/forums/topic/align-mobile-menu-items/#post-750832

    #751003
    Shawn

    Thanks Leo.

    The logo is an svg file and is cropped tightly already.

    Regards,
    Shawn

    #751006
    Leo
    Staff
    Customer Support

    Right now it’s at 85px height which is what you’ve set in CSS:
    https://www.screencast.com/t/xReA8B4v

    #751010
    Shawn

    I’m going to enlarge it as it’s a little small on mobile.

    Regards,
    Shawn

    #751036
    Leo
    Staff
    Customer Support

    Awesome. Let me know if you need another look πŸ™‚

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