Can the nav bar be split either side of the logo?

[core365]

Hi, I’m working on a site and the logo is quite tall, so ideally I want the nav bar to be split either side of the logo, so the logo is in the centre of the page and the nav bar has 3 pages to the left of it and 3 to the right of it. Is this possible?

I’ll put the URL in a secure note.

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

You can achieve the similar layout by adding logo inside a menu item and style it accordingly.

1. Add Custom Menu item under Appearance > Menus and give it a class name ex header-navigation-center. https://screencast.com/t/USa9YpWex
2. In navigation label add following HTML code. . https://screencast.com/t/qVo3nUzI8azO
3. After that add following CSS under X > Launch > Options > CSS:

.x-brand, .x-logobar {display: none;}
.header-navigation-center {width: 200px;}

Please note that the customization you are looking for falls outside the scope of support we offer. I have tried to point you in right direction by giving above solution. For any further customization you may take help of a developer.

Thanks.

[core365]

Hi, that’s great, thanks! There’s only 1 thing which I really hope you can help me with! I can’t figure out how to centre the menu - it’s floating to the right at the minute and I’ve tried float: none and then text align: center but it just then goes to the left of the screen!

Fingers crossed you can help me!

Thanks!

[thai]

Hi There,

Please also add this custom CSS:

.masthead-inline .desktop .x-nav {
    display: table;
    float: none;
    text-align: center;
    width: 100%;
}
.x-navbar .desktop .x-nav>li {
    float: none;
    display: inline-block;
}

Hope it helps

[core365]

That’s excellent, thanks! However, sorry to be picky designer, but it isn’t exactly in the centre and I can’t figure out how to change it so it is - it’s over a bit too much to the right.

Thanks!

[christian]

Hey @core365,

The menu items in the left and in the right should have the same length. Otherwise it would need additional custom CSS which will be getting into custom development.

Please consider using Pro for this setup so you’ll have more controls without resorting to custom CSS.

Thanks.

[core365]

Ah, ok, thanks for explaining!

I’ve used Pro on one of my other websites and think it’s quite complicated to set up a header! It might just take some getting used to, but I find X Theme much easier to use.

Thanks for your help!

[thai]

You’re welcome.