Docs

[Rue Nel]

Hello There,

This is how I see your website.

The logo and the other menu items are inline already. This could just be a caching issue. Are you using CloudFlare or may have installed a caching plugin like WordFence, W3 Total Cache or WP Super Cache? Please keep in mind that after doing every updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Hope this helps.

[Nabeel A]

Hi there,

I’ve checked your site and the Navbar looks good on my end (see attached). Please clear your browser’s cache and reload the site.

Let us know how this goes!

[philip_pape]

That’s because I’ve added “<br />” tags before the label text for the non-image items.

The screenshot I took is without the “<br />” tags.

[Paul R]

Hi,

Please note that you can adjust the alignment under Appearance > Customize > Header > Navbar Top Link Alignment (px)

http://screencast.com/t/XrAWQdHHfG

Also note that you can upload your logo image under Appearance > Customize > Header > Logo Upload

http://screencast.com/t/uZIgt7KJQ

Hope that helps

[philip_pape]

No, I’m sorry but I feel we’re talking in circles.

The “Navbar Top Link Alignment (px)” just pushes the menu down (relative to the navbar).

It does NOT change the middle/vertical alignment between an image-based menu item and a text-based menu item. They will still appear top-aligned.

[Rupok]

Hi there,

In that case, could you provide some screenshot and clarify the things you are trying to achieve?

Cheers!

[philip_pape]

Does this help?

[Joao]

Hello,

Upon comparing your website with the screenshot above provided I believe you already figured out a solution.

I have attached a screenshot of how your website looks on my end.

If you still need help with this issue or any other please contact us.

Thanks,

Joao

[philip_pape]

As I’ve said several times before, my solution is to add “<br />” tags before the text labels. But that is NOT a valid, responsive solution.

[Paul R]

Hi,

Please upload your logo as a logo and not as a menu item. That way you will be able to align the logo separate from your menu items.

Kindly do the following

1. Remove your logo menu item then add logo under Appearance > Customize > Header > Logo Upload

http://screencast.com/t/uZIgt7KJQ

2. Adjust logo alignment under Appearance > Customize > Header LOGO – ALIGNMENT

http://screencast.com/t/EkYSwgD0L

3. Adjust menu alignment under Appearance > Customize > Header > Navbar Top Link Alignment (px)

http://screencast.com/t/XrAWQdHHfG

Hope that helps.

and adjust logo alignment under

[philip_pape]

The reason I’m not doing that is because I’m using different menus on different pages (using the Menu Swapper plugin to use multiple menu locations and swap the Primary menu with another menu), and I want to show different logos on some of the sub pages.

Therefore, I can’t use just the one main logo. I need to do it this way.

I just need a solution for middle-aligning the navbar items.

Your help is appreciated!

[Rupok]

Hi there,

Thanks for updating. Possible solution is already provided. If you want to keep that plugin but still want to do this then regretfully we can’t suggest you any alternative.

Thanks for understanding.

[philip_pape]

I’m sorry, but this is not a solution to the problem.

Let’s say I just want to include ANY image in the navbar along with text items. This problem will still exist, even if it’s in the Primary default navbar.

There must be a way to fix the vertical alignment.

I’ve tried applying different padding, margin, and vertical-align values to the “.x-navbar” class with no luck. This is where I’m hoping you can provide advice since it’s related to X Theme.

[Lely]

Hello Philip,

Please remove the br tags and then add the following custom CSS:

.x-navbar .desktop .x-nav>li>a>span {
    padding-top: 20px;  /*This will push all links down to make it vertically centered */
}
.x-navbar .desktop .x-nav>li:first-of-type>a>span {
    padding-top: 0; /*This will negate above CSS to stop the logo from moving */
}

See attached screenshot for the result.

Hope this helps.

[philip_pape]

Perfect! That’s exactly what I needed, and it’s a clever implementation only adding padding to everything except the first item.

I knew you guys would come through! 🙂

[Author]

Posts