Remove header background image on mobile only

tech4eleven

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tech4eleven

thanks.

Albert

No problem.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next