Hide logo on desktops only [wordpress]

Question

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.

Use media queries (google CSS media query) to apply specific rules when e.g. width is less than 1000px or between 600px and 1000px. — Mike Grabowski

Rajesh Rajesh · Accepted Answer · 2014-11-11T20:28:57

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

Hide logo on desktops only [wordpress]

2 Answers