Center Menu Items In Responsive Navbar

w3schools has a nice example of a nav bar that will respond to a smaller screen: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav How can I have the menu items c

Solution 1:

float: center; is not valid in CSS, if you want to know more about floats I recommend taking a look at the "CSS layout - float and clear" documentation on the W3C: https://www.w3schools.com/css/css_float.asp

To align the li to the centre of the navigation you could do something like:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

ul.topnavli {
  display: inline-block
}

You could also try a more flexbox approach and just have:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: center;
}

if you decide to use flexbox you won't need to add: ul.topnav li { display:inline-block; }

Flexbox is well supported nowadays: http://caniuse.com/#feat=flexbox

Solution 2:

You can do this easily with flexbox.

On the link you've given to the W3 site remove the following line:

ul.topnavli {float: left;}  /*remove this line of CSS*/

Then, add the following CSS to the ul.topnav at the top of the page

ul.topnav {
  display: flex;
  justify-content: center;

  // rest of CSS goes here

}

Solution 3:

Try editing the css like this:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align:center;
}

here we are just adding centered text alignment. Next

ul.topnavli {display:inline-block;}

Here we are removing the fload:left and setting the display to inline-block. Does this create the desired results for you?