Docs

[Cesar J]

Hi,

Is there a way to hide the topbar image from the view in mobile?

My site is ioimprov.com/chicago

Also, I used the code below from one of your answers to insert a logo for mobile, and it looks great. I was wondering if there was a way to align the image I used it all the way to the left, and to make sure it always covered the nav bar between the left margin and the menu icon in mobile view, especially when I turn my mobile device to landscape mode. (right now the landscape mode doesn’t do anything and the image looks small)

@media (max-width: 979px) {
.x-navbar-inner {
min-height: 0;

}
.x-navbar-inner:after {
content: ”;
display: table;
clear: both;
}
.x-navbar .x-brand {
width: 250px;
height: 40px;
background: url(‘url-to-your-mobile-logo’) no-repeat center center;
background-size: contain;
}
.x-navbar .x-brand img {
display: none;
}
}

[Friech]

Hi There,

Thank you for writing in! To hide the topbar in mobile view, you can add this under Custom > CSS in the Customizer.

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

Hope it helps, Cheers!

[Cesar J]

Awesome! Thank you!

Any help on the other part of my question…?

[Nico]

Hi There,

try this adding in your customizer’s custom CSS:

@media (max-width: 979px){
.x-navbar.x-navbar-fixed-top.x-container.max.width{
width: 99%;

}
}

update this:

@media (max-width: 979px)
.x-navbar .x-brand {
width: 260px;
height: 55px;
background: url('http://ioimprov.com/chicago/wp-content/uploads/sites/2/2014/04/io-chicago-logo-mobile3.jpg') no-repeat center center;
background-size: contain;
}

into this:

@media (max-width: 979px)
.x-navbar .x-brand {
width: 250px;
height: 55px;
background: url('http://ioimprov.com/chicago/wp-content/uploads/sites/2/2014/04/io-chicago-logo-mobile3.jpg') no-repeat center center;
background-size: contain;
}

Hope it helps.

Cheers

[Claire V]

RE: this part of the thread –

Hi There,

Thank you for writing in! To hide the topbar in mobile view, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.x-topbar {
display: none;
}
}
Hope it helps, Cheers!

I did this as well and it was great for hiding the top bar on my mobile view. As you can see from my website though, whatcommfg.com , the logo goes up into the topbar space. So when I hid the topbar in mobile view, it also cut off the top of my logo.

Is there a way to hide the topbar text but keep the topbar space on mobile so the top of the logo image doesnt get cut off?

Thanks
Claire

[Rupok]

Hi Claire,

Thanks for clarifying! You can update the code –

@media (max-width: 979px) {
.x-topbar {
  visibility: hidden;
}
}

Hope this helps.

Cheers!

[meoptometry]

Is there a way to do this via the child theme css? I have tried using this code, but it appears to only work when it place it in the customizer > custom > css section.

Thanks,

meo

[Christopher]

Hi there,

It should work in style.css as well.
Please make sure you don’t have any typo mistake like missing curly brackets.

Thanks.

[Author]

Posts