[Sarah SParticipant]

Hello!

This is the site I’m working on:

https://host.rhdhosting.com/~coyote/

I set up my site to have a logo in the middle of the menu. So I set up one of the navigation links to display my logo image and added the following CSS:

@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: 306px;
height: 140px;
background: url(“https://host.rhdhosting.com/~coyote/content/uploads/2017/03/Coyote-Lake-Logo-1.jpg”) no-repeat center center;
background-size: contain;
}
}

The problem is that on my mobile site, the word ‘logo’ is showing up in my menu. I want the logo menu item to be completely hidden on my mobile site. Can you tell me what I did wrong?

Thanks!
Sarah

[JoaoModerator]

Hi Sarah,

Please add the following code to Appereance Customizer Custom CSS

.masthead-stacked .mobile .x-nav ul li#menu-item-110 {
display: none;
}

Hope it helps

Joao

[Sarah SParticipant]

Hi! Sorry for the delay on getting back to you. This didn’t work. Can you please advice another solution to hide menu item ‘logo’ so that doesn’t show up on mobile?

[ThaiModerator]

Please try with this CSS instead:

li.menu-item-110 {
    display: none !important;
}

Hope it helps 🙂

[Sarah SParticipant]

Hey, this CSS isn’t achieving what I want. On desktop computers, I want the logo image to show just like it is now. And the on mobile, I want the logo image toshow at the top of the site. Just like it is now. The only problem is that the word ‘logo’ (my name for this menu item) is also showing up in the menu. I don’t want the word logo to show up in the mobile menu. Please advise how to fix this.

[JoaoModerator]

Hi Sarah,

Sorry for our mistakes.

Please use instead :

@media(max-width: 769px) {

li.menu-item-110 {
    display: none !important;
}}

Hope it helps

Joao

[Author]

Posts