How do I center text in the main navigator bar?

[Aliana]

I keep trying, and failing, at centering the text for this correctly.


<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li><a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>{/if}</a></li>{/foreach}</ul></div>
I managed somehow briefly make the text fall vertically so I switched it back lol but I'd still like it to be centered so it aligns with the the banner and welcome message.

[Former Member]

Aliana , is the forum in question the one from your signature or is it a different forum? Manipulating text alignment is usually a CSS issue. 

[Aliana]

Yes, it's the same forum. Sorry I forgot to post the link prior!

[Scott]

Aliana ,

Go to Admin > Themes > Advanced Styles & CSS, Style Sheet.
Make sure the correct theme is selected.
Scroll to the very bottom of the CSS and on new line add this code:

/* Center Navigation Menu */
#navigation-menu > ul, #navigation-menu > ul li { float: none; }
#navigation-menu > ul { text-align: center; margin: 0 auto;}
#navigation-menu > ul li { display: inline-block; }
Save changes.

[Aliana]

Jan 17, 2019 14:48:54 GMT -8 Scott said:

Aliana ,

Go to Admin > Themes > Advanced Styles & CSS, Style Sheet.
Make sure the correct theme is selected.
Scroll to the very bottom of the CSS and on new line add this code:

/* Center Navigation Menu */
#navigation-menu > ul, #navigation-menu > ul li { float: none; }
#navigation-menu > ul { text-align: center; margin: 0 auto;}
#navigation-menu > ul li { display: inline-block; }
Save changes.

Ah, much better. Thank you.