Logo too big/small, flows out of menu

hi there,

set up a site using airi:

also tried several Logo sizes but all are either to small (when scrolled down) or too big (when scrolled up)

i tried the custom css

       .is-sticky .site-header .custom-logo-link img { 
       max-width: 200px ;
       max-height: 50px;  }

but when scrolling back the logo gets back to 400x100 so the menu bar is too small to cover the logo and the logo gets cut off

can you help? And is there a recommended logo size?
Greetings Matt

Hello Matt,

Try this CSS code to control and maintain same logo size when screen scrolled up/down.

    .site-header .custom-logo-link img,
    .is-sticky .site-header .custom-logo-link img {
      max-width: 300px;
      max-height: 99999px !important;
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

hi and thanks for your help!

it works, but now the menu is way too big and i cannot properly link #anchors anymore.

Also, it is okay to resize the logo when scrolling down, but just not too tiny.

Greetings Matt

Hello Matt,

You can enlarge the value of max-width. For example:

    .site-header .custom-logo-link img,
    .is-sticky .site-header .custom-logo-link img {
      max-width: 400px;
      max-height: 99999px !important;
    }

Page scrolling menu works fine to me.

Regards,
Kharis

This post was flagged by the community and is temporarily hidden.

This post was flagged by the community and is temporarily hidden.

Hi there, i made a news topic regarding that, sorry for the disorder