Centralize nav with Materializecss

Navigation
-1

Hello,

I'm running a lab with the use of Materializecss, but I'm having trouble centralizing the (nav) page menu. Can anyone help?

See the link

link

Thank you.

    
asked by anonymous 22.07.2015 / 18:45

2 answers

1

From what I saw in the documentation , I created some classes: 

@media screen and (min-width: 769px){

   .nav-wrapper ul.center {
     display: block;
     width: auto;
   }

   .nav-wrapper > ul.center li {
     float: none;
     display: inline-block;
   }

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
  <a href="#!" class="brand-logo">Logo</a>
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul class="center hide-on-med-and-down">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>
  <ul class="side-nav" id="mobile-demo" style="left: -250px;">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>
</div>
 </nav>

Note: I'm not sure if there was no problem on the mobile menu. You need to test to find out.

    
22.07.2015 / 19:03
-2

Try to decrease only the container of the nav-wrapper menu: 

nav .nav-wrapper { width:40% }
    
07.11.2015 / 14:33
Implementation of a system on the server [closed] User Control does not work