[Resolved] How to make square mobile logo full width?

[Jacks McNamara]

Hmmm so two issues –

1) if I set the mobile menu breakpoint to appear on larger screens, than I lose the logo image – I just see the menu toggle, but no image at all, neither the desktop version of the logo nor the mobile version of the logo. Screenshot here:
2) when I reduce 200px in the css you gave me, it doesn’t make the logo smaller, it just drops it down lower on tablets so I can see the words of the menu, but now the logo is on top of the body text as in this screenshot:

[Tom]

Hi there,

I’m seeing a couple issues:

1. The logo is dropping down because the “Navigation Drop Point” option has a value in Customize > Layout > Primary Navigation – try removing that value.

2. The CSS should look like this:

@media (max-width: 1024px) {
    .site-logo img {
        max-width: 200px;
    }
}

Let me know 🙂

[Jacks McNamara]

Hmmm. Didn’t work. I pasted in your css and I removed the navigation drop point, and that made the logo stop dropping, but I still have the same issue in tablet width that the navigation menu slips behind the logo. It seems like for tablet width either I can change the mobile menu breakpoint, and then I get the mobile menu toggle at a wider screen, but I lose the logo, or I can keep the desktop logo but then menu items disappear behind the logo.

[Tom]

Above this code:

@media (max-width: 1024px) {
    .site-logo img {
        max-width: 200px;
    }
}

You have this code:

@media (max-width: 768px) {
    #mobile-header {
        background-color: #3e243c;
        position: relative;
        z-index: 100;
        border: 0;
    }

    #mobile-header .menu-toggle {
        color: #fff;
    }

It’s missing a closing } at the end.

Adding that should fix it.

[Jacks McNamara]

You’re a genius. That was it. Thank you Tom. I appreciate both of your help so much.

[Tom]

Glad we could help! 🙂

[Author]

Posts