Center logo in the middle of the navbar

[gallagherBD]

Hello, I found some code on here before, but I cannot find it now.

I would like to center the logo and wrap the navbar around the logo. I did it on this site(source1sys.com), but cannot recreate it.

Here is the site I am working on now: http://kettlecorndemo.gallagherbd.com

Can you either find the support link or send me the code to do it? Thanks a lot!

[lely]

Hi @gallagherBD,

It was added as part of your menu.

1. Go to Appearance Menu > Edit that primay menu.
2. Add a Custom Link in it. Let say you add Logo as custom link label. For link on URL: add your site homepage URL: http://kettlecorndemo.gallagherbd.com/
3. Find the middle of the menu, and move that custom link.
4. On CSS Classes text field for that menu link, add logo-menu-item class. If this textfield is currently unavailble, click Screen Options on the upper right part of the page and enable CSS Classes under Show advanced menu properties
5. Add the following CSS on Theme Options > Global CSS

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 306px;
        height:75px;
        background: url(https://www.source1sys.com/wp-content/uploads/2018/05/sourceone-web-logo.png) no-repeat center center;
        background-size: contain;
    }
}

Change image to your current image site URL and also other values related to that image like width and height.

Hope this helps.