[Resolved] Mobile Logo extends beyond bounds of Mobile header

Home Forums Support Mobile Logo extends beyond bounds of Mobile header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1395897
    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!

    #1395917
    Leo
    Staff
    Customer Support

    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.

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

    #1395957
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1395989
    Edward

    Nailed it!! Thanks Leo

    #1396011
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.