Center nag bar/menu

[RiverDR]

Hi, I wrote a while ago that I couldn’t center my menu on the page. Everything is left aligned. When I used the options tool, I click inline, it doesn’t do anything but place my logo to the left. I just want my menu to be centered.

I had to leave it for a bit so the previous topic closed. How can I make my menu center and not aligned to the left?

thank you

[ruenel]

Hello There,

Thanks for posting in!

Do you want something like this? http://prntscr.com/kka2fq
Please go to X > Theme Options > Headers > Logo & Navigation and select “Stacked” as the layout so that the menu will be at the center.

Hope this helps.

[RiverDR]

Yes! Like the example that you gave.

I have it on stacked which is why i’m confused that it’s not centered.

[ruenel]

Hey There,

Is the site in the secure note, the one in questioned?
I am seeing a centered menu on my browser. If this is not the site, please provide us the url or even the access to that we can investigate.

Thanks.

[ruenel]

Hello There,

Thanks for providing the url of the page. Actually your menu is already centered. The reason why you think it is not centered is because there aren’t enough space to display 6 long menu item titles in your navbar. The font size is quite big and the spacing is wider as well. To resolve this issue, please do the following:
1.) Go to X > Theme Options > Header > Links - Text and set a smaller font size.
2.) Go to X > Theme Options > Header > Links - Alignment and reduce the “Navbar Top Link Spacing”.
3.) If using a smaller font size does not make the menu items positioned at the center, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-container.max.width {
    widthL 100%;
    max-width: 98%;
}

We would loved to know if this has work for you. Thank you.

[RiverDR]

Yes, ok thank you. I shifted the font size and they are all center. However, I’m a little bummed about this. If I decide to add another page, which I will, it will go to the next row but aligned to the far left. Like working with the body text and having the option to align everything in the center, no matter what font or size of font, would be a great addition to this theme in the navigation bar.

I desire to have everything labeled big and readable for accessibility reasons with low sight people without having to compromise design.

Thanks for sticking with me on this.

Is there any available code to make sure the second row of pages can be in centered?

[paul.r]

Hi,

To make it centered, you can add this in Theme Options > CSS

.x-navbar .desktop .x-nav>li {
    float: none;
    display: inline-block;
    vertical-align:middle;
}

.masthead-stacked .desktop .x-nav {
    text-align: center;
}

In case you want to learn some css, I am sending you some videos that could help.

Thanks

[RiverDR]

Ooooo interesting thank you! I really appreciate this. I will try the code you sent me

[RiverDR]

YESSS that code worked!!! That’s exactly what I was looking for!!!

[thai]

You’re welcome.