Adding background image to header

cece101 · March 2018

1. I am trying to add an image as a background for the header instead of the dark brown color that i have now. i added an image to muffin options - header - background image. I have it set to center top - no repeat, size auto. Not sure why it isn't showing up... also want it to be the background on tablets, phone, etc.

2. On mobile view, the mobile menu icon (3 lines) is currently green and pretty small. How can I make that white and much larger - thicker lines and larger size in general as it is hard to see currently.

Thanks for your time.

Bryan · March 2018

Hi,
1. The image is actually under the header, you would have to turn it transparent in theme options>global>general and change the minimalist option in theme options>header.
2. The color can be changed in theme options>colors>menu but the size cannot be changed
thanks

cece101 · March 2018

Thanks for the response.

1. I tried to make the changes on the header to have the background image show behind the logo... it did not work. Can you let me know what I am doing wrong? Thanks!

2. Can I get a bit of css to make the mobile menu icon a bit larger?

cece101 · March 2018

1. I tried to make the changes on the header to have the background image show behind the logo... it did not work. Can you let me know what I am doing wrong? Thanks!

2. Actually... for #2 the mobile menu icon does look ok now BUT it is not inline with the mobile menu. Can that be corrected so that both the mobile menu icon and mobile logo are in line and one is not higher or lower than the other as you look at it? Thanks again.

Bryan · March 2018

1. Like we said, you have to make the header trasnparent and change the minimalist options.
2. You can set the icon position using this css

#Top_bar a.responsive-menu-toggle.is-sticky {
	top: 60px !important;
	left: 10px !important;
}

thanks

cece101 · March 2018

Ok under header I set "minimalist" to off. Under global, background I set header and top bar with menu to transparent. I am not seeing the background image in the header - I only see white. Are you seeing the background image?

Thanks for the code.

Bryan · March 2018

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

cece101 · March 2018

will do that now

Bryan · March 2018

The problem was that your background-size was set to auto, we changed it to cover.
thanks

cece101 · March 2018

Yes great. That does now look perfect on a laptop/computer. But as you shrink the screen to phone size or look on a phone, the header background becomes brown (which it is supposed to) BUT under the header is now a portion of that background image that you now see before you see the first page section. That background image should not show on the phone. How can I make sure that is removed on a phone? Thanks!

Bryan · March 2018

Go to theme options>responsive>header and check the transparent option for the mobile header.
thanks

cece101 · March 2018

cece101 · March 2018

I checked and for the responsive header, only sticky is checked. Minimal and transparent are not on. So how should I remove that extra almost 2 inches of header background image that is showing below the actual header? There is the mobile header with the menu icon and logo with the brown background... that is just fine. Then there is an additional almost 2 inches of background image showing where it shouldn't show. Thanks for checking.

Bryan · March 2018

Please set the minimal and transparent option for the mobile header. Is that what you wanted? A transparent mobile header without the header space?

cece101 · March 2018

Doesn't need to be transparent but yes minimal sounds correct. So I set the responsive header to minimal and cleared cache but the extra space below the mobile header still shows the background image on tablet and mobile phone. Help.

Bryan · March 2018

Try using this css

@media (max-width:767px) {
	body:not(.template-slider):not(.header-simple) #Header {
	min-height: 50px !important;
}
}

cece101 · March 2018

Thanks.

Adding background image to header

Comments