Mobile Logo extends beyond bounds of Mobile header

[Edward]

Hello and thanks for checking out my post. I have gotten most of the way using the suggested docs and prior forum posts. I have achieved my desired Mobile header size of 50px using the Mobile toggle and setting Menu Item Height to 55. Since I have the mobile menu set to Sticky, I have also uploaded same logo to Sticky Navigation and set to Mobile Only. I uploaded a 50 x 50px logo and set it as logo in header section with Mobile Header set to On. The logo extends beyond the top and bottom bounds of the Sticky Mobile Header. I tried an SVG and png image with same results. I can keep the mobile logo inside the mobile header by increasing Menu Item Height with mobile toggle to 80px. But I am hoping to fit this 50px logo inside the 55px sticky mobile header.
Your thoughts are appreciated!

[Leo]

Hi there,

Sorry I’m a little confused what you’d like to achieve here.

Are you wanting to reduce the logo size in sticky navigation?

If you are using a caching plugin, can you disable it so I can see the source better?

Thanks.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Edward]

Thanks for taking a look at it. I’m not using any caching plugin. I am confused why a 50px tall mobile logo wouldn’t be fitting inside a mobile header set to 55px with Menu Item Height in the Mobile Toggle inside the Primary Nav settings of Customizer. When I pinch the screen down to the smallest size view in my desktop browser the logo fits fine in the sticky header with these settings when I scroll down the page. But on iPhone using Chrome, Safari, Brave, Firefox and DuckDuckGo, the logo extends above top and bottom of header on scroll.

[Leo]

I believe this CSS you’ve added is causing the issue you are referring to:

@media (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
height: 80px;
padding: 0;
margin-left: 17px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Edward]

Nailed it!! Thanks Leo

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts