[ursaminorParticipant]

Hello!

I have been attempting to add a background image to the header to achieve the look of the attached design. I want to have this design for the inner pages, not the home page. (I’m happy with the home page as it is now).

I have been unsuccessful trying to make this work. Can you please help me?

Thanks!

[ursaminorParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

Thanks for writing in.

Add this in your customizer’s custom CSS:

.x-topbar {
    background:url(imagelocation.jpg);
}

.x-navbar-inner {
     background:url(imagelocation.jpg);
}

Hope it helps.

Let us know how it goes.

Thanks.

[ursaminorParticipant]

Thank you for your response.

I tried adding the CSS, but unfortunately it did not work. Here is the result: http://bit.ly/1UeDBb0

The problem is it makes two copies of the image instead of one image. Also, the image should extend both above and below the navbar.

Here is the way I want it to look: http://bit.ly/1UeEdNK

Thank you for your assistance.

[Paul RModerator]

Hi,

Please change the code given above with this.

.masthead {    
    z-index: 9999;
    position: relative;
    background: url(http://uma.dev.ursaminor.com/wp-content/uploads/2016/05/header-bg.jpg) top center no-repeat;
    padding-bottom: 40px;
    background-size: cover;
}

Hope that helps.

[ursaminorParticipant]

Hi there.

Thank you! This helped me get closer, but a couple of problems remain. Here is a new screenshot for how it looks now: http://bit.ly/1O2p9X8

1. I don’t want this to affect the Home page. I only want this to affect inner pages.
2. On the About page, I want the background to be above the bread-crumb bar. I want to push the breadcrumb bar down and not have the background image behind the breadcrumb bar.

Here is the exact way I want it to look (notice the breadcrumb bar is below the header background): http://bit.ly/1UeEdNK

Thanks for your help!

[Nabeel AModerator]

Hi there,

1. For homepage, use the following code:

.home .masthead {
    background: none !important;
    padding-bottom: 0 !important;
}

2. To push the breadcrumbs down, add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

(function($) {
   $('.x-breadcrumb-wrap').insertAfter('header.masthead');
})(jQuery);

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[ursaminorParticipant]

Hi there.

Thank you for your help. Regarding the Home Page, it now looks great in Safari: http://bit.ly/1O2OFvr
But unfortunately in Firefox the slider is pushed down below the menu: http://bit.ly/1sppQzW

Regarding the inner pages, even though I added the js and emptied the cache, the breadcrumbs are still overlapping the header background: http://bit.ly/1sppolj.

Thank your for your assistance.

[FriechModerator]

Hi There,

Update the Custom CSS code given above to this:

body:not(.home) .masthead {    
    z-index: 9999;
    position: relative;
    background: url(http://uma.dev.ursaminor.com/wp-content/uploads/2016/05/header-bg.jpg) top center no-repeat;
    padding-bottom: 40px;
    background-size: cover;
}

This should exclude the homepage from having the background image.

The JavaScript above should move the breadcrumbs from header, and should not affected by the background.

Hope it helps, Cheers!

[ursaminorParticipant]

Fantastic!

I typed in the js by hand and that fixed the breadcrumb issue. Excellent!

The only problem is in Firefox, the Home Page slider is still pushed below the masthead. Here is a screenshot: http://bit.ly/1PhJJTR

But it looks great in Safari and Chrome.

Is there a way to make it work in Firefox also?

Thanks!

[ChristopherModerator]

Hi there,

Please remove negative top margin from container and try following code :

.home .x-main.full {
  top: -102px !important;
}

Hope it helps.

[ursaminorParticipant]

Excellent. That solved it.

Thanks so much.

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts