Remove header background image on mobile only

tech4eleven · January 2016

Id like to know how to remove the header background image for mobile ONLY on my entire site. Actually id like to really remove everything in the header but the menu icon and the logo and the solid purple background as seen in this screen shot: http://take.ms/5C5ob

What CSS do i need to make this happen?

thanks.

tech4eleven · January 2016

I was able to achieve what i wanted by using this css:

@media only screen and (max-width: 767px)

{

body:not(.template-slider):not(.header-simple) #Header {min-height: 0px !important; background-position: center 0px !important;}

#Subheader .title { width: 100%; text-align: center !important;}

#Subheader ul.breadcrumbs {text-align: center !important; display: inline !important;}

}

I don't know its its the ugly way of doing it or not but it works. If there's a better way, please suggest.

Albert · January 2016

Hi,

any solution that works, is a good solution. So if above css is working as you expect, it means you did it the right way

tech4eleven · January 2016

thanks.

Albert · January 2016

No problem.

Remove header background image on mobile only

Comments