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!
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.