Docs

[Michael C]

I am working on a small customization on the header of this site: http://silver.startheaters.wpengine.com/

What I am trying to do is make the center logo which displays almost as I want it to. I would like the bottom 8px to show over the Ubermenu.

I have tried everything I can think of to make this img z-index on top of the Ubermenu.

What css can I use to accomplish this? The only one that puts images over the Ubermenu also really messes up everything, putting the navbar all the way up to the top of the page, and all the images float over to the left top of the page – really messing the entire layout.

I’m hoping for an easy css.

Thanks for your help.

Mike

[Rue Nel]

Hello Mike,

Thanks for writing in! Please find this block in your custom css in the customizer

.x-logobar-inner {
    background-image: url('http://silver.startheaters.wpengine.com/wp-content/uploads/sites/2/2016/08/header-bg.jpg') !important;
    background-size: cover;
    margin-bottom: -10px !important;
}

and update the code by using this code instead:

.x-logobar-inner {
    background-image: url('http://silver.startheaters.wpengine.com/wp-content/uploads/sites/2/2016/08/header-bg.jpg') !important;
    background-size: cover;
    margin-bottom: 0 !important;
}

Hope this helps.

[Michael C]

Thanks! That’s almost what I was attempting. But as you see the logo that grows when you rollover still falls behind the Ubermenu. How do I get it to be the z-index above (on top, or higher layer) than the Ubermenu?

Thanks for your help.

Mike

[Rue Nel]

Hello Mike,

To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-logobar {
    z-index: 16000;
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts