Be Theme | Header Image

ProdigalMedia1

I am using the classic header and have disabled the background header image by enabling the minimalist header toggle in the admin options. However it does do what I want it to do on the front end when viewing on a browser but instead creates another issue. For some reason it is still displaying a space for the background header image on responsive screen sizes and mobile devices. Please see links to screen screen shots. 

http://postimg.org/image/ukjn6aq4d/ - How I want it displayed

http://postimg.org/image/u6ib6p60t/ - I do not want this black header section here

Albert

Hi,

please send us url to your website where this happen and we`ll have a look on it.

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

ProdigalMedia1

http://newevetselectric.reliabilityanywhere.com/

Albert

Ok we see, what happen on subpages. To remove this dark section between logo and subheader on mobile devices, please use below custom css in Theme options > Layout > Custom CSS section:

body:not(.template-slider):not(.header-simple) #Header { min-height: 110px; }

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

ProdigalMedia1

Thank you for the help. This solved my issue.

bencarew

Me too. Thanks.

lulatsch

Hi, I want to set a header Image behind the logo (i uploaded a transparent image)..

How can I do that? If I set a Header Image, it wont appear on the front...

Thanks in advance!

www.lulatsch.ch

Albert

@lulatsch You are using header where it is impossible to set header background. If you want to use header background, you must use header like "Modern" for example.

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

lulatsch

I tried.. but it doesn't show up either..

how can I set the logo in the middle with a backround image?

Thanks

Albert

What you tried? If you will switch to "Modern" header style, then background image will appear for sure. But if you want to keep this header style, then you can use below css to set background image for whole top bar:

#Top_bar { background-image: url('PATH-TO-IMAGE') !important; }

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

popsynic

Thanks Muffingroup.  I am not sure how, but this helped an issue I had where too much of the header image was showing on mobile devices, meaning you had to scroll way down to see the content

This CSS made the space between the menu and the first content on my site look much better when viewing on a iPhone mobile phone browser

body:not(.template-slider):not(.header-simple) #Header { min-height: 110px; }