Archived topic
Mobile Logo extends beyond bounds of Mobile header
5 replies · Started by Edward on August 10, 2020
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!
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.
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.
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;
}
}Nailed it!! Thanks Leo
No problem :)
