Responsive logo version for navbar

Hello!

My website currently has a navbar that is fixed left, with a stacked version of our logo. When the navbar re-formats to the top for smaller screens, however, the stacked logo looks silly.

As a part of the responsiveness of the website, I would like the logo to switch to the horizontal version when the navbar moves to the top. How can I go about doing this?

Thanks!

Hey Jody,

There’s is no option in X to switch the logo on mobile. What you can do in X to make the Logo look nice is adjust the logo size to a value that looks good both on desktop and mobile. You can do that by reducing the Logo Width in Theme Options > Header.

After that, adjust the Navbar Top Height still in the Header Options group in order to go with your logo size. You might then need to adjust the alignment options like the Navbar Top Logo Alignment and the Navbar Side Logo Alignment.

If you want more control over your header design, I’d recommend you consider upgrading to our Pro theme which has a header builder. With the Header Builder, you can hide an image (logo) based on screen size so you can have a desktop logo version and a mobile one.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.