Reduce Header Logo on Mobile

I’m trying to reduce the size of my firm logo when viewing my site [LINK]

I deployed the following CSS to manage Logo Size on Desktop - but it has no affect on mobile (iPhone):

#masthead.float-header .site-logo {
max-height: 70px;
transition: 0.5s;
margin-bottom: 0;

Is there some specific code or adjustment that I can make to simply reduce the size of the logo, or header area on mobile?

Thank you.


Hello Andy,

That code seems to be working fine. Maybe site cache enabled prevents the new code addition to take an immediate effect. Please flush it and reload your site.


Perhaps I didn’t explain what I wanted to do well enough. What I’d like to do is reduce the size of the header bar that contains my logo and the hamburger menu.

See attached image:

Do you know if there’s a way to do this so it affects the mobile view only?

Hello there,

Please try this code:

    @media only screen and (max-width: 800px) {
      .site-logo {
        max-height: 60px;
      .site-header {
        padding: 5px 0;
      .btn-menu {
        margin-top: 0 !important;

    @media only screen and (max-width: 480px) {
      .site-logo {
        max-height: 40px;

Ensure applied site cache is flushed after new code addition.

Let me know how it works for you.


1 Like

Thank you! That worked perfectly.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.


this solution worked for me too. thanks