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

[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

[Leo]

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;
    }
}

[Andy]

yes sir, complete!

[Leo]

Can you activate the mobile header option next?
https://docs.generatepress.com/article/mobile-header/

[Andy]

complete

https://imgur.com/a/COI5evG

[Leo]

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.

[Andy]

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

[Leo]

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.

[Andy]

no worries! easy.

Reverted back.

[Leo]

Thanks 🙂

Now what if we just add this CSS?

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

[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:

https://imgur.com/r96ej6P

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

[Leo]

Have you solved all the issues?

I just checked the site and played with browser resizing and everything looks good to me 🙂

[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;}

[Leo]

Looks good to me 🙂

[Author]

Posts