Docs

[JW & Co.]

Hello!

I am trying to slide the background image on the home page of homeandhealthy.joshuaweatherstone.com up under the topbar. I would like the navbar to be on top of it. Suggestions?

Thanks,
Josh

[Joao]

Hi Josh

Please add the following code to Appereance Customizer Custom CSS

 .x-navbar {
            position:absolute;
            width:100%;
            background-color:transparent !important;
            box-shadow: none;
            border: 0;
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }

Hope it helps

Joao

[JW & Co.]

Hello,

Sorry I did not communicate very well. I would still like the navbar to be blue and on top of the photo, but I want the top of the photo to replace the white topbar. So the order is this:
1. Topbar is actually the top of the image peeking above the navbar.
2. Navbar stays as is on top of the image.
3. Image continues below.

Is what I want more clear now?
Josh

[Joao]

Hi There,

I think in that case the easiest would be to cut a slice of the top of the picture and use as a background image on the topbar.

Just add the following code to Appereance Customizer Custom CSS:

.x-topbar {
background-image: url(http://homeandhealthy.joshuaweatherstone.com/wp-content/uploads/2016/07/Stay-Independent.jpg);
}

Hope that helps

Joao

[JW & Co.]

Works beautifully! You’re a genius.

Thanks,
Josh

[Jade]

You’re welcome Josh.

[JW & Co.]

I spoke too soon! Is there a way to apply this effect only to the home page topbar?

Thanks,
Josh

[Joao]

Hi Josh!

Are you taking back I am a genius ? Ah Josh you hurt my feelings :p lol 🙂

Josh please try this code instead:

.home .x-topbar {
background-image: url(http://homeandhealthy.joshuaweatherstone.com/wp-content/uploads/2016/07/Stay-Independent.jpg);
}

Hope that helps

Joao

[JW & Co.]

Joao,

I never doubted that you were a genius. 😉 Thanks – this works!

Josh

[Joao]

Hi Josh! 😀

Let us know if you need help with anything else.

Joao

[Author]

Posts