Archived topic
Force Centering of Navigation no matter what?
1 reply · Started by Thomas on May 13, 2021
Hey GP Team, thanks for the help as always. Hoping you could point me in the right direction. I'd like to have my Navigation menu be centered no matter what, even if it line breaks. Is this something that is possible? I figured text-align: center would work but it's not "working as intended" i guess. I have included a link to the nav. Basically any resolution with a width of 1305 or less will make the navigation break into two lines, with the top line centered and the bottom line left aligned.
Is there a way to always force it to be one line without setting font sizes for every resolution? Or is there a way to force it to be centered even if it line breaks?
Thanks!
Hi there,
it is possible to set a font-size based on the viewport width ... but it can be hit and miss and theres a chance that on real smaller ( non mobile ) sizes its going to generate links that are 'too small'
But centering the links even when they wrap to new lines can be done with some CSS:
@media(min-width: 769px) {
.main-navigation .main-nav > ul {
justify-content: center;
}
}