Docs

[Zach W]

Hi there-

I want to add a background image to my header/navbar like on this site: http://www.simonsayslearning.com

How do I add an image instead of a solid color?

Thanks

[Rad]

Hi Zach,

Thanks for posting in.

Depends on what part of the header, top bar, logo bar, or nav bar. Could you provide your url address? 🙂

For the meantime, I think you’re referring on logo bar since nav bar has menu that can’t be on top of an image as your ideal site. Then try adding this css at your customizer’s custom css under Admin > Appearance with your own image url.

.x-logobar {
background: url(http://link/of/your/image) no-repeat;
background-size: cover;
}

It’s also best if you could provide the image url and mockup of your desired result.

Thanks!

[AZUbius]

Hi,

Is it possible to apply this to an inline header as well? It only seems to work with a stacked header type.

[AZUbius]

Nevermind! I just figured out how to apply the background to the inline layout with the following code:

.x-navbar {
background: url(http://background/here.jpg) repeat-x center center;
padding-bottom: 20px;
}

The padding was used to help me give enough space at the bottom with the shape of the logo I had, and allow me to align my nav text appropriately.

[Senthil]

Glad that you fixed it 🙂

[Peter Fae]

I’ve got a question on this. I want to change the navbar background from clear to an image (a golden mirror) on this site: http://www.dakotachanel.intothemythica.com

Which is the correct code to do this?

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

.x-navbar {
	background-image: url('IMAGE URL');
	background-size: cover;
}

Please post your reply on your own post here: https://community.theme.co/forums/topic/how-do-i-put-a-background-behind-the-menu-on-the-left-side-navbar/?replyto=570876#post-599094

Hope it helps, Cheers!

[Thai4more]

dear, i past your code inside the customizer, see atached file at 1, i want change the background in the header see 2 in the attachment, what do i wrong?
Thanks in advantage, best regards cor

[Thai]

Hi @thai4more,

It seems like your CSS code is incorrect.

Please try adding this CSS:

.x-navbar {
	background-image: url('http://localhost/sample/wp-content/uploads/2016/01/4more-fight-shorts-nav-back-ground-1.jpg');
	background-size: cover;
}

Let us know how it goes!

[Thai4more]

sorry, i new to it, thank you very much for the best customer support i ever had.

[Christopher]

You’re welcome.

[David H]

I have used the code below and added to my CSS Customizer and the background is not appearing in my logo bar. Did I miss something?

.x-logobar {
background: url(http://link/of/your/image) no-repeat;
background-size: cover;
}

Thanks, David

[Lely]

Hi David,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[David H]

This reply has been marked as private.

[Christopher]

Hi there,

The URL of background image is not correct. please add it to address bar and test it : http://isdg-austin.com/bolners/bolners-header-background

Thanks.

[Author]

Posts