Centre text in nav bar

[pollenbird]

Hi,

I would like to centre the text labels in my navigation page…I can’t seem to find an option for this? Am I being dim?

I have a sample page here: http://festivalofgeology.org.uk/museums/ and ideally I would like to centre the text in the nav bar on the second line rather than having it aligned left.

Thanks in advance for your help

[ruenel]

Hello Barbara,

Thanks for writing in!

Do you want to display something like this?

The default layout of the theme header is that the nav items were positioned to the left that is why when there isn’t enough space, the other nav items go to the second row and then still positioned itself to the left. There is a built-in CSS styling in the theme that makes it position to the left. It is using this default CSS code:

.x-navbar .desktop .x-nav {
    text-align: left;
}

.x-navbar .desktop .x-nav>li {
    float: left;
}

You will need to override or modify this code by setting the text alignment to the center and setting the CSS float property to none. You may also need to display the nav items as inline-block so that the items will be next to each other. Hence, the resulting code would be:

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

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

You may add this modified CSS code into X > Theme Options > CSS. Be advised that this is just an example code of you can accomplish what you have in mind. You may need to adjust other styles too. Please note that if you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Best Regards.

[pollenbird]

Thank you!

[marc_a]

Hi Barbara,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.