How can i create a navbar with center aligned links using Materialize?
Materialize comes with a float: left
on all nav ul li
elements. If you try to center them with the standard Helper, it won't work. So, in addition to text-align: center
, you'll have to set that float
to none
. However, that will make all of your buttons stack atop each other; to solve that, simply have the <li>
elements display inline and the <a>
elements display inline-block.
I suggest creating a new class as such:
nav.nav-center ul {
text-align: center;
}
nav.nav-center ul li {
display: inline;
float: none;
}
nav.nav-center ul li a {
display: inline-block;
}
Use the standard Materialize <nav>
component with the .nav-center
class above:
<nav class="nav-center" role="navigation">
<div class="nav-wrapper container">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/help">Help</a></li>
</ul>
</div>
</nav>
The official answer is likely that navbar links should be either left or right aligned, to indicate functionality, as per the material design guidelines: https://material.google.com/layout/structure.html#structure-app-bar
however, you can get around this in a somewhat hacky way:
<div class="naxbar-fixed">
<nav>
<div class="brand-logo center">
<ul>
<li class="active"><a href="/page1">page1</a></li>
<li><a href="/page2">page2</a></li>
</ul>
</div>
</nav>
</div>
by wrapping your navbar in an a div with classes brand-logo and center you're tricking materialize into thinking the menu is a logo and it will allow the links to be centered.
I believe such a menu would disappear on a small enough screen and may not behave how you want it to.
You can use materialize tabs instead:
<div class="naxbar-fixed">
<nav>
<div class="white-text">
<ul class="tabs center" style="width:20em;">
<li class="tab col s6 active>
<a href="/page1">page1a>
</li>
<li class="tab col s6">
<a href="/page2">page2</a>
</li>
</ul>
</div>
</nav>
</div>
This has the advantage of giving each link and equal width but will likely require you to do a bit of extra styling and may require more work if you're concerned with mobile.