[Resolved] How do I place my logo to the right side of my menu icon in mobile view?

Home Forums Support How do I place my logo to the right side of my menu icon in mobile view?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1501710
    Andy

    Hi there,

    On my website, you will see that I have the logo positioned in the center of the primary navigation.

    Question: Do you see the Menu Label written beside my off-canvas menu icon? I would like to place my logo there in mobile view. Is this possible?

    Please note, the Menu Label is there to give you an idea of how my logo will look in that position… I’ll remove it after I add your CSS code.

    Thank you,
    Andy

    #1501865
    Leo
    Staff
    Customer Support

    Hi there,

    Can you change this CSS:
    .navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    }
    to desktop only like this first?

    @media (min-width: 769px) {
        .navigation-branding {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99;
        }
    }
    #1501880
    Andy

    yes sir, complete!

    #1501934
    Leo
    Staff
    Customer Support
    #1501951
    Andy
    #1502632
    Leo
    Staff
    Customer Support

    Sorry did you change the breakpoint?
    https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

    I’m not seeing the mobile header showing up.

    #1502676
    Andy

    sorry about that! Fixed. Mobile breakpoint is now set at default, 768.

    #1502686
    Leo
    Staff
    Customer Support

    I’m sorry – I keep changing my mind on how we should accomplish this.

    I think your original set up was actually easier.

    Can you try undo everything I’ve asked so far and set it back to the original state?

    It’s kind of an odd layout so I got a little confused.

    #1502711
    Andy

    no worries! easy.

    Reverted back.

    #1502719
    Leo
    Staff
    Customer Support

    Thanks πŸ™‚

    Now what if we just add this CSS?

    @media (max-width: 768px) {
        .navigation-branding {
            left: 105px;
        }
    }
    #1502740
    Andy

    perfect Leo!!! thank you!

    One clarification please, I noticed that my menu icon is off-center (top and bottom spacing) on mobile view, but perfect on desktop view.

    Similarly, my logo is off-center (top and bottom spacing) on desktop view, but perfect in mobile view.

    The green button is perfect in desktop and mobile view.

    Any idea why that’s happening? Can it be related to the custom CSS I’ve implemented on this primary navigation?

    Here’s an example for the menu icon in mobile view:

    View post on imgur.com

    #1502752
    Andy

    Now that I think about it, maybe this is happening because I resized my menu icon and logo with CSS in the past?

    I did the right thing correct? If I want to change the size of the logo or menu icon, I have to use CSS?

    I guess when I do that, it loses the perfectly center placement on the primary navigation?

    #1502795
    Leo
    Staff
    Customer Support

    Have you solved all the issues?

    I just checked the site and played with browser resizing and everything looks good to me πŸ™‚

    #1502845
    Andy

    Hi Leo,

    I think I fixed it! Thank you

    I just want to make sure these settings are correct. Is this appropriate code?

    1. Is this the proper code to resize logo?
    .navigation-branding img {padding: 20.5px;}

    2. Is this the proper code to resize the menu icon?
    .main-navigation .main-nav ul li a, .menu-toggle: {font-size: 16px;}

    #1502886
    Leo
    Staff
    Customer Support

    Looks good to me πŸ™‚

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