Make Logo Bar disappear on mobile

[bluetroop2]

Hi X Team,

For this web-site (https://mitech-services.com/) can you please recommend a bit of code to force the LOGO BAR to disappear on smaller mobile screens?

Thank you in advance.

[RubberDuckers]

Go to ‘customize’ on the element you want to hide and toggle it off on the devices you don’t want it shown.

[bluetroop2]

But it is the logo bar, not an element. How do I do that?

[RubberDuckers]

Can you clarify what you mean by ‘logo bar’? If it’s the whole bar you can do the same instructions.

If you mean the top bar that comes with the stack:

@media (max-width: 766.98px) {
.x-topbar {
display: none;
}
}

[prakash_s]

Hello @bluetroop2,

Thanks for writing to us.

Since you are using X theme so there is no option to hide through the element breakpoint. In case if you want to hide the only logo on the small device you need to add this custom CSS code under X—>Theme Option —>CSS.

@media(max-width:978.98px){
a.x-brand.img {
display: none;
}
}

In case if you want to hide the complete logo section of the header you need to add this CSS code.

@media(max-width:978.98px){
.x-logobar {
    display: none;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[bluetroop2]

Yes, the second code you listed worked. Thank you for your help.

[prakash_s]

Hello @bluetroop2,

Glad that we were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Have a great day!
Thanks