How to place logo in the center of the menu?

Hi team,

Please refer to the images in the following link- https://imgur.com/a/pBa9y
The 1st image is where I am right now on my website on X. The second image is what I want to achieve.

Specific Issues-

  • I am not able to further reduce the width of the navbar
  • Not able to remove the blue/black line across the logo on the top
  • Not able to vertically align the logo in the middle of the navbar
  • Absolutely no idea on how to horizontally align the logo in the middle of the navbar

Request you to please help.

Hi there,

The theme does not have that Center Logo, split menu functionality by default. But there is a workaround which goes to a customization category and is outside of our support scope. We will do our best to explain how to do so but we will not be able to implement the functionality for you.

  • Go to WordPress Dashboard > Media.
  • Search for your logo image
  • Write down the URL of your image which you will use later:

  • Go to the Appearance > Menu section.
  • Click on the Screen Options at the top right section of the screen.
  • Enable the CSS Classes option there:

  • Go to the menu item which you think will be the center one and add the-logo in the CSS Class option of that menu item.

  • Go to X > Launch > Options > CSS and add the CSS code below:

.the-logo {
  background: url(URL OF LOGO IMAGE) no-repeat center center;
  background-size: contain;
}

Change the URL OF LOGO IMAGE with the URL which you copied in steps above.

The CSS may need to have more tweaks to be 100% what you want.

Hope it helps.

Thanks! Can you also tell me how to remove that black horizontal line which is passing above the logo? It looks like navbar’s border but I have not been able to find a CSS class for it.

Hi there,

Would you please kindly send us the URL of your website to be able to check the case live and try to help you out regarding the line you are talking about?

Thank you.

Hi, it’s http://lotusinapond.com/

Hi There,

Please add the following code to Theme Options CSS

.x-topbar {
    border: 0;
}

Hope it helps!

1 Like