how to make materializecss center navbar? - css

Question

I want to make my menu's center on the navbar using materializecss
My HTML code:
<div class="navbar-utility theme">
<ul class="right">
<li>
<a href="#" id="navbar-search-trigger">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="#" id="navbar-full-screen">
<i class="fa fa-arrows-alt tiny"></i>
</a>
</li>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">
Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
My CSS code is below:
.navbar-utility{
-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
width: 100%;
position: fixed;
top: 64px;
text-align: center;
}
.navbar-utility ul.right{
float: left;
clear: both;
margin:0px auto;
text-align:center;
}
but this doesn't seem to work. Any help would be appreciated.

Answer 1

You just try this code..
<div id="menu">
<ul>
<li>Tab one</li>
<li>Tab two</li>
<li>Tab three</li>
<li>Tab four</li>
</ul>
</div>
#menu {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
overflow:hidden;
position:relative;
}
#menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#menu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#menu ul li a:hover {
background:#369;
color:#fff;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}