Centralize Nav with Materializecss

Asked

Viewed 856 times

-1

Hello,

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

See the link

http://www.equipasub.com.br/teste/

Thank you.

css nav-bar

  • Post the page code along with her css

  • I think it is easier for you to see the problem on the page itself with the error http://www.equipasub.com.br/test/ ...there is practically no change to the examples of the site of materializecss

2 answers

1


From what I saw in documentation, 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>
<script src="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>

Obs.: I’m not sure if it caused problem in the mobile menu. You need to test to find out.

  • It worked! Thank you. A question: In your opinion which is the best way to put the logo in the middle of the menu?

  • From what I saw in the documentation, you already have an option to leave the logo centered, but the links are in the corners, all centered maybe would be put the right in the middle of the links @Rodney.

  • That’s what I had in mind. Again, thank you!

-2

Try decreasing only the menu container nav-wrapper:

nav .nav-wrapper { width:40% }

Browser other questions tagged css nav-bar

You are not signed in. Login or sign up in order to post.