[Anthony WParticipant]

Hi, I’d like to add a background image to the Renew theme header. The image should fill the yellow field behind the logo. I’ve tried searching but I can’t figure this out.

http://cityhalltexas.com/?page_id=40

[Kosher KMember]

Hi Anthony,

You can achieve that using CSS,

Please add this in Customizer -> Custom -> CSS and change the image source url

.x-logobar-inner {
	background: url('your-image-url-here.jpg') no-repeat center top;
}

let us know how it works out for you.

Cheers

[Anthony WParticipant]

Yep, just what I needed.

Another question for you. Is there a resource available that would tell me what css styles to modify for things such as this?

[Kosher KMember]

Hi Anthony,

You can use “Firebug” extension for Firefox and Chrome Built-in function called “Inspect Element”

You can simply google those two things and it would give you thousands of result and tutorials on how to use them also and how to get the classes for specific division.

Cheers.

[ajaerni1Participant]

I used the css fix mentioned above:

Please add this in Customizer -> Custom -> CSS and change the image source url
.x-logobar-inner {
background: url(‘your-image-url-here.jpg’) no-repeat center top;
}

…and now have the header image I want. How do I now make it mimic the dynamic window size updating shown on the Theme X demo page? (shown here: http://theme.co/x/) When I open that web page, the Nav bar is perfectly aligned at the bottom of the window, even when I resize the window. Both the Nav bar position and header background image update dynamically to match the users window size. How do I do that? Then as I scroll down, the Nav bar goes up and attaches itself to the top of the users window. Please help and thanks in advance.

[ChristianModerator]

Please see https://community.theme.co/kb/sliders/ to learn how that setup is achieved.

Thanks.

[citrusstudiosParticipant]

The problem we have is that the background only covers the header. But it doesn’t cover the menu area? We want the background to cover both the header background as well as the menu too?

thanks

[ThaiModerator]

Hi @mtiet,

Please provide us with your website URL so we can take a closer look.

Thanks.

[citrusstudiosParticipant]

http://staging3.citrusstudios.com.vhost.zerolag.com/

[citrusstudiosParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

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

.x-navbar {
    background-color: transparent;
    margin-top: -80px;
}

.x-navbar .desktop .x-nav > li > a {
    height: 50px;
}

.x-nav-wrap.desktop {
    margin-top: 30px;
}

Hope this helps.

[citrusstudiosParticipant]

Thanks that works!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[ajaerni1Participant]

I used the info you provided above (Please see https://community.theme.co/kb/sliders/ to learn how that setup is achieved) to get the full-screen view with offset masthead so my nav bar appears at the bottom regardless of screen size. PERFECT.

Next, when I scroll down, I want the nav bar to anchor itself to the top of the page just like on the Theme X demo (http://theme.co/x/). I didn’t see how to do that on the video. How do I do that?

http://www.destinationgrowth.org is my page in case you’d like to see what I’m talking about.

[John EzraMember]

Hi there,

Thanks for updating the thread! Regarding the navbar anchoring or becoming sticky when scrolling. You can set this option in the customizer.

Appearance > Customize > Header > Navbar Position >> Set this to Fixed Top.

Hope this helps – thanks!

[Author]

Posts