Centered Navbar

[gallagherBD]

Hello,

I used this code to center the navbar:

@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(http://isomaxguard.com/wp-content/uploads/2020/07/isomaxguard-white.png) no-repeat center center;
background-size: contain;
}

The problem is that I need to make sure it stays centered and right now it is not.

Is there something I can add to it?

[friech]

Hi @gallagherBD,

Thank you for writing in, but your Navbar is already centered since you set the logo and navigation layout to stack.

I think what you mean is to center the logo that is inside the menu, which is kind of tricky to do in this situation since your left and right menu items are not equal and since they are in one navigation you cant adjust them individually.

You might want to consider upgrading to Pro so you can have two navigation elements and between on those navigation elements you can place the logo (image element).

Converting from X to Pro

Thanks,

[gallagherBD]

I have upgraded to pro. Can you show me an article laying out how to pull off the 2 navigation elements separated by an image?

[marc_a]

Hi @gallagherBD,

It’s great that you upgraded your X to Pro Theme.

To get you started on customizing your header, please check our docs about the overview for Header and Footer intended for Pro.

You can also check our Youtube Channel where we have plenty of video tutorials about our theme.

Hope that helps.

Thank you.

[gallagherBD]

I have gone through the docs and watched the video and I am unable to make the header mobile responsive. Can you give me some information to help?

[marc_a]

Hi @gallagherBD,

The key to creating your desired layout in Pro’s Header builders is understanding Flexbox. Please this out the complete guide for Flexbox. I know it takes a bit of getting used to but the rewards are great.

Hope that helps.

Thank you.

[gallagherBD]

I am finding it odd that I upgraded to pro and the header is no longer responsive and I need to do a complicated learning session to get it there. I am not a coder, so this is like I am learning a new language. It is odd that there is not a simple button to make it responsive.

I will try to toy with it and see what I can do.

[friech]

Hi @gallagherBD,

That is true, but that is also the reason why the standard header is very limited in features. The header that you’re trying to do is not simple (even though it looks simple) so you need an advanced feature like Flexbox to do it.

If your schedule allows you, here’s a long video of Flexbox Tutorial by Kory, this should give you a clear overview of how the flexbox works that is powering the header/footer builder. You can actually see there (at 28-minute mark) that one of his examples is a two inline navigation with a logo in the middle. The User Interface of the builder in the video looks different though as that was recorded from the older version, but the concept of flexbox remains.

Hope it helps,
Cheers!