[jlhsolutionsParticipant]

Hello,

I managed to follow the directions in another post that described how to create a menu with your logo at the center. This worked for the most part, but I have the “Search Icon” enabled, so it’s pushing my menu to the left a little.

Here is the CSS code I used from the other article.

@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: 192px;
        height: 96px;
        background: url(http://www.jasonhagenphoto.com/wp-content/uploads/2015/08/Logo.png) no-repeat center center;
        background-size: contain;
    }
}

@media ( max-width: 979px ) {
.logo-menu-item {
display: none;
}
}

.x-navbar .desktop .x-nav > li#menu-item-531 > a:hover, .x-navbar .desktop .x-nav > #menu-item-531.x-active > a, .x-navbar .desktop .x-nav > #menu-item-531.current-menu-item > a {
  box-shadow: none;
  }

I can’t seem to figure out what CSS to adjust to make it centered when the search is turned on. If I turn it off, then my logo is centered.

Here is my website.

I would great appreciate any help I can get.

[Rue NelModerator]

Hello There,

Thanks for writing in! When search is turned On, the search icon is added as a menu item. You will now have six menu item instead of five. To be able to maintain the position of the logo at the center of the page, you need to add a padding in the menu. To do that, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-stacked .x-navbar .desktop  .x-nav {
    padding-left: 63px;
}

http://prntscr.com/apkirq

Hope this helps. Please let us know how it goes.

[jlhsolutionsParticipant]

That’s perfect! I couldn’t figure out what to use for the CSS.

Thanks again for your help!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts