Mobile Header Image

MetOne · August 2016

Hello,

I was wondering if it's possible to either remove the Header image for mobile devices, or replace it with a different header? Currently when the site is on mobile, the header image is moved down so you can only see the bottom part and then the "header colour" takes over,

This messes around with the branding of the site so, is it possible to either remove the image for mobile or add in a mobile specific image?

Albert · August 2016

Hi,

your site is under construction so we can not have a look on it.

MetOne · August 2016

Hi, it should be viewable now

Albert · August 2016

Ok. So to remove header background from mobile and move the logo up, you need to use the following css:

@media only screen and (max-width: 767px) {
    #Top_bar:not(.is-sticky) { padding: 0 !important; }
    body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }
}

MetOne · August 2016

Thanks for the response, works brilliantly!

My only other question is, is it possible to add a mobile only header image?

Albert · August 2016

You can try the following css to do this:

@media only screen and (max-width: 767px) {
    body:not(.template-slider):not(.header-simple) #Header { background-image: url('PATH-TO-IMAGE') !important; }
}

MetOne · August 2016

Thanks, unfortunately the logo seems to sit about the banner in it's own block, but its not too important!

Thanks for the help!

Albert · August 2016

If you will turn off "Maintenance Mode" then we can have a look on it once again but when we were checking the code first time, we didn't noticed anything like that.

Mobile Header Image

Comments