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,
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With