CODEWITHSUNDEEP
csswordpressmobilemenu
crazythedon
crazythedon

Reputation: 15

Hide logo on desktops only [wordpress]

I am developing a website in WordPress where I am using a nav images plugin to center the logo among the menu items in the header. Essentially, what I would like to do is hide the main logo area (above the header) on desktops/laptops so it the logo is only shown as the nav menu image. I would also like to hide the menu image (which links to home) on the mobile/tablets because it is shown as blank in the navigation menu.

Website is: http://museiam.ca/

Main Logo:

.gbtr_logo {

}

Logo Nav Menu on mobile:

.menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-2716 has-image {

}

I have found the styles here but am unsure how to implement it: http://www.studiopress.com/design/website-respond-mobile-devices.htm

I appreciate any input. Thank you.

Upvotes: 0

Views: 575

Answers (1)

Rajesh
Rajesh

Reputation: 139

You can use media queries //devices withing 768px 

@media (max-width:768px){

.menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-2716 has-image {
display:none;
}

}

Just place this in your theme style.css

Upvotes: 1

Related Questions