Centralized responsive menu

Asked

Viewed 328 times

0

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

How to do it? Because this menu is all the time aligned on 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

  • your sample code is not formatted and makes it difficult to read. Please see this help: http://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks

  • Dude, use the Webstorm editor from jetbrains. I saw that your code is a little confused, it will help you a lot.

  • Hello. Thank you for your attention. This code was copied from w3schools itself. In fact, I just need to know how to center the entire menu. Do you know? Follows code in w3schools: http://www.w3schools.com/howto/tryit.asp?filename=howtry_js_topnav

1 answer

1

Replace the class csswhich 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 in operation: Here

  • Hello. Gosh! Thank you very much !!! I just wanted to ask one thing, I took the float: None and it worked centrified in the same way. What is his function in this case? Is it good to maintain or not? Something else: for this code to work as many brwosers as possible I have to add normalizr.css? Is there any other code that helps compatibility? Hugs.

  • Hello @Wendell, I actually went to test better and stopped working the button that shows the menu when it is responsive. Not showing, just aligned. What will be?

  • @Tesok if you look at the code itself you posted, the responsive menu no longer works on it, but don’t worry, see again your code in operation here already with the responsive menu working!

  • Hello @Wendell. It was great! I don’t know how to thank you. I would like to ask how I can study and deepen like you, through the internet itself. I have difficulty understanding inline-block, inline-etc.... And some other things, like when using firt-Child, not, etc... All this comes from your head ? How can I learn? I take the opportunity to ask if to work with as much compatibility as possible with other browsers, normalizr.css (known) is enough? Or are there other includes that help? Hugs, friend. May you go too far with this generosity of yours.

  • @Tesok first do not forget to put your question as answered. You will easily be able to learn using tutorials on the internet. I recommend you go learning little by little and training a lot, don’t just stay in theory. As for the inline-block there is the same question similar to your here. normalize.css is a great alternative to normalize the elements in various browsers, there is also the option of CSS Reset, you can see a comparison between them here.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.