Logo in header – size changes

Hi there,

Thank you for reaching out.

Responsive theme provides the option to set site logo width.

Please navigate to Customize->Site Identity . From there you can set a logo and change its width.

Hope this helps resolve your issue.

Regards,

Pratik

Thank you. I did that but there was no change – it is the same as before. I didn’t have this problem using the same logo on another website using your theme. The logo on that website looks good on the desktop and it reduces on mobile view – it looks good there too. What could be the problem?

Actually, I found what the problem is. My menu is on the same line as the logo on the left. The width of the menu pushes on the logo which results in its reduced size. My temporary solution is to implement this code:

site-navigation {max-width: 70% }

However, I am worried that it will interfere with something else in your theme. Can you please advise?

Thank you.

Hi there,

Thank you for bringing this issue to our notice.

I checked and was able to replicate this issue on my end. For now I would suggest you to add some custom css as a temporary fix.

#site-navigation{

max-width: fit-content;

}

This should work for now.

Please let me know if this resolves your issue.

Regards,

Pratik

Thank very much. This takes care of the logo, but unfortunately, it impacts the menu. The menu is too close to the logo – there should be more space between them and more importantly, the right side of the logo should be more aligned with the right side of the content below it – meaning it should be closer to the right side – as it is, it is positioned too far from it.

So in addition to your code, I put in this:

header#masthead.site-header .container .row {
justify-content: space-between;
}

Would this work in your theme? If so, is it necessary to put the whole code or would just

.container .row {
justify-content: space-between;
}

be enough?

However, there may be a problem in mobile view perhaps? The hamburger menu should be centered – it is not. And the logo does not seem to keep its width when the view gets smaller.

Many thanks.

• This reply was modified 7 months, 2 weeks ago by mica123.
• This reply was modified 7 months, 2 weeks ago by mica123.
• This reply was modified 7 months, 2 weeks ago by mica123.
• This reply was modified 7 months, 2 weeks ago by mica123.

Sorry to come back again. I tried to sort out the site navigation on mobile view :

#site-navigation {
max-width: 100%;
}

But it doesn’t work. Please let me know what seems to be wrong. Thanks.

• This reply was modified 7 months, 2 weeks ago by mica123.

Hi there,

Thank you for reaching out.

Please adding this custom css.

@media screen and ( min-width: 767px ){

#site-navigation{
    max-width: fit-content;
}

.container .row {
    justify-content: space-between;
}

}

This will prevent the styles from affecting mobile menu.

You can set min-width value to the mobile menu breakpoint value you have set in customizer in case you’ve changed it.

Regards,

Pratik

• This reply was modified 7 months, 2 weeks ago by pratik001.

Thank you for getting back to me. I very much appreciate your help.

Your code works up to a point. I had to implement a different min-width to achieve the look I needed (983px;). This works up to a point. The problem is that between the size of 983px until about 1080px the menu is too close to the logo, thus making it look smaller. The ideal look of all this comes after the screen size of 1080px. It seems that there is nothing I can do about it?

Hi there,

In case you need some gap between your navigation menu and logo, you can add another media query in custom css:

@media screen and ( min-width: 767px ) and ( max-width: 983px){

#site-navigation{
    margin-left:50px;
}

}

You can set the max/min and margin values as per your preference.

This is a temporary fix. We have added the issue you reported to our development roadmap and it will be fixed in an upcoming release.

Feel free to reach out if you have any further questions.

Best Regards,

Pratik

Thanks. Would you let me know once this is fixed in your release?

Thanks again.

Hi there,
You will be notified once the issue is resolved.

Best Regards,
Tejas