Change menu logo size for mobile

[Haz]

Greeting everyone, could you please assist me in this issue.
I have chosen perfect logo size for my website, im viewing the web on bigger screens (1200px & up) and it looks amazing

But once i start viewing it on any other dimension it turns tiny on screens

Can i see two different sizes for bigger and lower screens?
Please advise how

[tristup]

Hi Haz,

Thanks for reaching out.
There are two options to adjust the logo size, one you can add another image element that is only visible in a certain breakpoint. You can do that using the Hide During Breakpoint option under the Customize tab of the element. Another option to add the following custom CSS code to Element CSS of the specific image element.

@media  (max-width: 480px) 
{
    $el.x-image 
    {
        max-width: 29.5vw;
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Haz]

Thank you so much, this code worked like magic, im very happy with the results, thank you again!

[marc_a]

Hi @Haz,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.