Horizontally ceentered nav menu

In this example below you will see how to do a Horizontally ceentered nav menu with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by intermedion, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright intermedion ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Horizontally ceentered nav menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul>
	<li id="nav-home"><a href="#">Home</a></li>
  <li id="nav-blog"><a href="#">Blog</a></li>
	<li id="nav-links"><a href="#">Links</a></li>
	<li id="nav-about"><a href="#">About</a></li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/intermedion/horizontally-ceentered-nav-menu-aAjex */
ul { /* also works with ol */
    width: 100%; /* or your desired width */
    text-align: center; /* this will center the list items */
}
li {
    display: inline-block; /* the key bit */
    *display: inline; /* IE7 hack */
    *zoom: 1; /* IE7 hack */
}

ul li a {
   margin:20px; 
   padding: 20px;
  text-decoration: none;
}
 

Comments