How to create a center-aligned navigation bar using Materialize?

Question

I’m trying to create a web page with vertical scrolling on 1 page using the navigation bar at the top, using materialization, now only classes are materialized that allow links to be aligned left or right, the logo can be centered, but not the links themselves,

I added center alignment and center classes to UL and the 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 freezing of link behavior and background color,

Answer 1

The material consists of float: left for all nav ul li elements. If you try to center them with the standard Helper , this will not work. Thus, in addition to text-align: center , you need to set the float to none . However, this will cause all of your buttons to stack on top of each other; to do this, simply add the <li> elements, and the <a> elements display the 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> 

Answer 2

The official answer is most likely that the navigation links should be either left or right to indicate functionality in accordance with the principles of material design: 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> 

wrapping your navigation bar in a div with the brand logo of the classes and focusing on the fact that you are fooling yourself into thinking that the menu is a logo, and this will center the links.

I believe that such a menu will disappear on a fairly small screen and may not behave the way you want it to.

Instead, you can use materialization bookmarks:

 <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 providing every link and equal width, but most likely you will need a little extra style and may require more work if you are interested in a mobile phone.

Answer 3

So, I solved this by adding the following conversion to my UL element:

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

Since my links occupy about the 1st screen, the conversion is to move them only to the 1st to the left.