Navigation bar with horizontally align center

Back to Posts

Navigation bar with horizontally align center

Check out how to horizontally center my fixed navigation bar.

HTML Code

<body>
<ul id=”nav”>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</body>

CSS Code:

<style>
body{ background:#333}
#nav{
  list-style: none;
  position: fixed;
  margin-top: -10px;
  width: 100%;
  font-family:verdana;
  font-size: 0;
  font-weight:normal;
  text-align:center;
  padding-left:0px;
}
#nav li{
  width: 200px;
  display: inline-block;
  text-align: center;
  padding: 15px;
  background-color: #96C;
  font-size: 30px;
  color:#fff; margin-top:15px
}
</style>

 

Back to Posts