Juan Juan - 3 months ago 92
CSS Question

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

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,

Answer

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.

Comments