Make site logo automatically decrease size when screen size decreases?

It seems an issue after switching to Flexbox.

Can you go to customizer > layout > sticky navigation, remove the logo, publish, then add the logo back?

There is no logo inside the customizer > layout > sticky navigation.

Hi there,

The issue seems to be coming from the change to flexbox w/ effectively added this CSS:

.main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

but this should be easily addressed within the customizer settings.

Can you try going to Appearance > Customize > Layout > Primary Navigation and set the Navigation alignment dropdown to "Right"?

First of all, there is no Navigation Alignment dropdown. I have set Navigation Location to float right.

Even I tried added the CSS but no changes.

Strange,

You should see this option - https://share.getcloudapp.com/8Lupd5xw

Can you share what you see on your end?

The alternative would be this CSS:

nav#sticky-navigation div#primary-menu {
    margin-left: auto;
}

I am seeing this on my end https://prnt.sc/25y124g

Is using CSS is the only option left?

Thanks

Can you try remove the navigation logo?

It is not available inside the Sticky navigation as you asked before...

https://www.screencast.com/t/7Mt3BZEo
I mean remove the logo from customizer > layout > primary navigation, it's a legacy feature, it no longer exists in most users' customizer.

My navigation search bar stopped working and also the mobile menu is not working after adding the codes( I guess)

Please have a look, provided the site URL in the private information field.

My navigation search bar stopped working and also the mobile menu is not working

Just checked your site and both the search bar and mobile menu works on my end.

Can you try clear your browser cache?

Let me know :)