Increase logo size on tablet view

Hi Manuela,

You have this CSS added:

@media (max-width: 1024px)
.main-navigation .site-logo.navigation-logo img, .mobile-header-navigation .site-logo.mobile-header-logo img, .navigation-search input[type="search"] {
    height: 111px;
}

Try to find it then you can change the numbers.

But it will mess up with your logo's centered position, so after you changed this number, you need to find this CSS you added:

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 55px);
}

And change the 55pxto half of the logo size. For example if you change the logo height from 111px to 120px, then you'll need to change the 55pxto 60px.

Let me know :)

Hey Ying,

Where should I look for the code? It is not in Additional CSS.

If you can't find the first CSS, go to Customizing > Layout >Primary Navigation, check Menu Item Height for mobile.

The second CSS should be in additional CSS.

Let me know!

Yes, I found the menu height for mobile and I increased it. All well for mobile, but the size remained the same for tablet...

Alright, then try to add this CSS:

@media (min-width: 768px) and (max-width: 1024px) {
   body .main-navigation .site-logo.navigation-logo img, body .mobile-header-navigation .site-logo.mobile-header-logo img, body .navigation-search input[type="search"] {
        height: 120px;
    }
}

Yes, this is it!

Amazing support :)

No problem :)