How can i create a navbar with center aligned links using Materialize?

Question

I am trying to build a 1 page vertical scrolling website with a navbar at the top using materialize, now, materialize only has classes to align the links either left or right, a logo can be center aligned but not the links themselves,

I've been adding center-align, and center classes to the UL and a wrapper div, and also, tried using the grid without success, here is my code:

HTML

   <div class="navbar-fixed"  >
    <nav id="nav_f" class="transparent z-depth-0" role="navigation" >
        <div class="container">



            <div class="nav-wrapper"  >

             <div class="row s12">

            <div>
                  <ul class="hide-on-med-and-down navbar " >
                      <li><a id="desk-about-us" href="#about-us">ABOUT US</a></li>
                      <li><a href="#how-it-works">HOW IT WORKS</a></li>
                      <li><a href="#comments">COMMENTS</a></li>
                  </ul>
                </div>
              </div>

                <ul id="nav-mobile" class="side-nav side-nav-menu ">
                    <li><a href="#about-us">ABOUT US</a></li>
                    <li><a href="#how-it-works">HOW IT WORKS</a></li>
                    <li><a href="#comments">COMMENTS</a></li>
                </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse right"><i class="material-icons">menu</i></a>
            </div>

       </div>
    </nav>
</div>

On my css there is only an underline for the hovering behavior of the links and the background color,

Solution 1

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>

Solution 2

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.

Solution 3

So, i solved this by adding the following transform to my UL element:

nav ul{
  transform: translateX(32%);
  webkit-transform: translateX(-32%);
}

Since my links take up around 1 3rd of the screen the transform is to move them just 1 3rd to the left.