Centralized responsive menu

0

I need this menu to be centralized because my whole site is centralized.

How to do it? For this menu is all the time aligned to the left.

I try to center, but it loses the background.

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
text-align: center;
}

ul.topnav li {float: left;
text-align: center;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
text-align: center;
}

ul.topnav li a:hover {background-color: #111;text-align: center;}

ul.topnav li.icon {display: none;text-align: center;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 500;
    top: 0;
  text-align: center;
}
  ul.topnav.responsive li {
    float: none;
    display: inline;
text-align: center;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
text-align: center;
  }
}


</style>
</head>
<body>


<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>


<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.c("responsive");
}
</script>

</body>
</html>
    
asked by anonymous 02.07.2016 / 08:31

1 answer

1

Replace the class css which is currently like this:

ul.topnav li {float: left;
text-align: center;
}

For this:

ul.topnav li {
    float: none;
    text-align: center;
    display: inline-block;
}

See working: Here

    
02.07.2016 / 20:54