Docs

[SPACECOWB0Y]

I have this in my custom css:

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: left;
width: 400px;
height: 170px;
background: url(http://hadassahjewellery.com/wp-content/uploads/2016/05/Hadassah-Jewelry-Header.png) no-repeat center center;
background-size: contain;
}

I would like to hide it in my mobile and tablet. How do I do that?

[John Ezra]

Hi there,

Thanks for writing in! You can enclose your CSS snippet within a media query like so:

@media (min-width:768px) {
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 400px;
        height: 170px;
        background: url(http://hadassahjewellery.com/wp-content/uploads/2016/05/Hadassah-Jewelry-Header.png) no-repeat center center;
        background-size: contain;
    }
}

Hope this helps – thanks!

[SPACECOWB0Y]

Hey, sorry I didn’t copy all of what I had. The css above puts it up top separate from the menu. Here is what I have now.

@media (min-width: 980px) {
.x-logobar {
display: none !important;
visibility: hidden !important;
}
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: left;
width: 400px;
height: 170px;
background: url(http://hadassahjewellery.com/wp-content/uploads/2016/05/Hadassah-Jewelry-Header.png) no-repeat center center;
background-size: contain;
}
}

[Lely]

Hello There,

Please use the following CSS:

@media (max-width: 979px) {
.x-navbar .desktop .x-nav > li.logo-menu-item {
    display: none;
}
}

Hope this helps.

[SPACECOWB0Y]

Hey, that isn’t doing what I need it to do either :/

I am currently placing my logo in the center of the menu where it shows up as an image. When the window is in tablet or phone size the logo goes into the button pull down menu but only shows up as text saying Logo. I want to remove that menu item from the menu when it shrinks to tablet or phone.

[SPACECOWB0Y]

This reply has been marked as private.

[SPACECOWB0Y]

This reply has been marked as private.

[Joao]

Hi There,

Please have a look at this thread

https://community.theme.co/forums/topic/toggle-header-inline-mobile-and-stacked-desktop/

Let us know if you need further help.

Thanks,

Joao

[SPACECOWB0Y]

Hey,

I still need help with this. Here is the code I have right now.

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 400px;
        height: 170px;
        background: url(https://hadassahjewellery.com/wp-content/uploads/2016/05/Hadassah-Jewelry-Header.png) no-repeat center center;
        background-size: contain;
    }
}
.x-container.width {
  width: 100%;
}.x-navbar .desktop .x-nav > li > a > span {
    text-shadow: 2px 2px 2px rgba(0,0,0,1);
}
.x-navbar .desktop .sub-menu a >span {
  font-size: 1.8em;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,1);
}
.x-navbar .desktop .sub-menu {
    background-color: #D3D3D3
}
@media (max-width:979px){

/* Changes top navbar from desktop (Stacked) to mobile (inline) */

  .masthead-stacked .x-brand {
        float: left;
}
  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -50px;
  }
  
/* Corrects layout to allow single line navbar and with menu button top right */

 .x-logobar{
    border-bottom:none;
}
 .x-navbar.x-navbar-fixed-top {
    left: 0;
    right: 0;
    top: 54px !important;
    z-index: 1030;
    position: fixed;
}

.x-logobar.x-navbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0px !important;
}
}

@media screen and (max-width: 980px){
	html {
    margin-top: 0px !important;
}
	#wpadminbar {
		display: none;
}
	.x-navbar-inner {
		min-height: 0px;
}
}

and

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-logobar').addClass("x-navbar-fixed-top");
		} else {
			$('.x-logobar').removeClass("x-navbar-fixed-top"); 
		}
	});
});

It does add my logo to the phone/tablet menu but the button is out of place, the word “logo” is still in the menu – that is my biggest concern, and when scrolling in phone or tablet mode it does some strange stuff. Please can you have a look and let me know what changes I need to make?

Thank you!

[Joao]

Hi There,

Find this part of your code:

  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -50px;

And Change for

  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -90px;

If you are not satisfied with the alignment play with the value of “top”

Your logo is no longer appearing inside the menu.

Please see img attached.

Let us know if you need help with anything else.

Joao

[SPACECOWB0Y]

Hello,

Thanks for getting back with me. Do you see in the attached image that you added in the previous post that two items are highlighted in the menu? One of them says Logo and I would like to remove it from the menu when in phone/tablet mode. Is that possible?

[Paul R]

Hi,

To remove it in mobile, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.x-navbar .x-nav-wrap.mobile li.menu-item-113 {
    display:none;
}
}

Hope that helps

[SPACECOWB0Y]

Excellent! Thank you 🙂

[Joao]

Glad to hear it.

Reach us if you need help with anything else.

Joao

[Author]

Posts