Centralized responsive menu

Question

Centralized responsive menu

Navigation

#1 by (1 votes)

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>

javascript html css

asked by anonymous 02.07.2016 / 08:31

1 answer

How in the xhtml commandButton to identify that an error was generated in Dao and keep navigation on the same page? Background misaligned with the page (exceeding the limit)

score 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