Docs

[PersimmonDesign]

Hello,

I’m trying to make a nav bar with my logo centered in between links. I found a helpful answer in the forum but it’s still not quite achieving what I need. For some reason the logo is hidden behind the container.

I’m pretty familiar with CSS but can’t figure out what the element it is behind.

I really want the logo to over lap the hero image as in this website
http://www.socialsummercamp.com/

Here’s a link to my site I’ll provide log in credentials in separate submission.

http://dev-cafechloeatscout.pantheonsite.io

Thank you in advance for your time.

Luisa

[PersimmonDesign]

This reply has been marked as private.

[Jade]

Hi Luisa,

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

.x-nav-wrap.desktop {
    height: 90px;
}

Then update this code:

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    text-indent: -99999px;
    text-align: left;
    width: 190px;
    aheight: 62px;
    background: url(http://dev-cafechloeatscout.pantheonsite.io/wp-content/uploads/2016/09/Web-Logo-Color.png) no-repeat center center;
}

to

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    text-indent: -99999px;
    text-align: left;
    width: 280px;
    height: 200px;
    background: url(http://dev-cafechloeatscout.pantheonsite.io/wp-content/uploads/2016/09/Web-Logo-Color.png) no-repeat center center;
    background-size: 100%;
}

[Author]

Posts