[Resolved] Logo Being Cut Off On Mobile

[Joseph]

Hello, I have my secondary navigation in use and have the mobile menu disabled. I also added some CSS to hide the hamburger menu.

Unfortunately, my logo is being cut off when viewed on mobile devices.

My website is philadelphiaautowrap.com

I am on Android. Please don’t just reply and say you aren’t getting it. I have brought it up on several different devices, and with all cookies cleared.

I am using Elementor Builder

[Leo]

Hi there,

Just checking, are you referring to your phone number as logo?

[Joseph]

Yes I have my phone number as the logo image.

[Tom]

I can see the issue on Android, but only when scrolling down.

I believe it’s being caused by this custom CSS:

.menu-toggle:before {
    display: none;
}

If you don’t want the icon, we can try setting the height on the outer element with this:

.menu-toggle {
    height: 70px;
}

Let me know 🙂

[Joseph]

Ok I added the last bit of css. Still cutting things off. I don’t understand why it is doing this. Check out my other website, phoenixhoodcleaning.net, I didn’t add any custom CSS, and the navigation is configured exactly the same on both sites. The philly auto wrap site was showing a hamburger menu, which I don’t want, and scrolling up to hide part of the logo. The sites are literally exactly the same in Customizer. That I can tell anyways.

[Tom]

Can you show me a screenshot of the issue as you’re seeing it? I want to make sure I’m seeing the same thing.

[Joseph]

Philadelphia Car Wrap Website screenshot from Android browser.

[Tom]

The second site doesn’t have this CSS:

.menu-toggle .mobile-menu:empty {
    display: none;
}

Can you try removing that from the first site just to see if it fixes the issue?

[Joseph]

Ok I removed it.

Still does it, and now includes the hamburger menu, which is the reason the CSS was there to begin with. I don’t know why the hamburger is on this site. I didn’t have it on the Phoenix site.

[Tom]

This was a hard one to figure out! I actually think it’s because one of your Elementor sections (the carousel) is causing horizontal scroll.

Can you try adding this CSS?:

.elementor-image-carousel.slick-arrows-outside {
    display: none;
}

[Joseph]

Wow good find. I would have never thought of that.

I finally got it the way I wanted with this bit of CSS.

.page .entry-header {
      display: none;
}
.site-header {
    display: none;
}
.elementor-image-carousel.slick-arrows-outside {
    display: none;
}
.menu-toggle:before {
    display: none;
}

Seems unnecessary to have all that CSS, when the Phoenix site didn’t need any of it.

[Tom]

First snippet shouldn’t be necessary if you use the Disable Elements metabox to disable the title: https://docs.generatepress.com/article/layout-metabox-overview/

Second is isn’t really necessary if the element has no padding or content, but it doesn’t hurt.

Third one is only necessary because that particular element is causing horizontal scroll.

Last one is necessary for the toggle to go away.

Glad I could help find the culprit! 🙂

[Author]

Posts