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

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

Home Forums Support How to make square mobile logo full width?

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • #1158227
    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:

    #1158440
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #1158458
    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.

    #1158994
    Tom
    Lead Developer
    Lead Developer

    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.

    #1159014
    Jacks McNamara

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

    #1159296
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 16 through 21 (of 21 total)
  • You must be logged in to reply to this topic.