Centering My Navigation Menu Links

How to center a navigation bar with CSS or HTML?

#nav ul {
    display: inline-block;
    list-style-type: none;
}

It should work, I tested it in your site.

Sample Image

Centering my navigation menu links

Try this out:

<!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <style type="text/css">
        #menu-bottom-nav {
            margin: 0;
            padding: 0;
            width: 600px;
            text-align: center;
            border: 1px solid #000;
        }

        #menu-bottom-nav li {
            list-style-type: none;
            margin-right: 20px;
            border: 1px solid #ff0000;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }
    </style>
</head>
<body>
    <ul id="menu-bottom-nav">
        <li>Test</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
</body>
</html>

CSS Center nav bar links

Use flex to it get more flexible:

.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }

How to center the navigation menu on my Wordpress site

Use this css:

.site-bar .nav {     width: 100%;    float: none;     text-align: center; }
.navigation > li {     float: none;    display: inline-block;}

HTML & CSS Center navigation bar

Using flexbox will do exactly that...

adding flex-flow: row wrap; will allow the menu to wrap on smaller screens if the navigation is larger than the viewport.

You will need to prefix those styles to run on all browsers FYI.

.navigation nav {  display: flex;  justify-content: center;    background-color: #333333;}ul {  display: flex;  flex-flow: row wrap;    list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  border-radius: 5px;}li a {  display: block;  color: white;  text-align: center;  padding: 16px;  text-decoration: none;  border-bottom: none;}li a:hover {  background-color: #111111}

<header class="navigation">  <nav>    <ul>      <li><a class="active" href="#home">Home</a>      </li>      <li><a href="#download">Download</a>      </li>      <li><a href="#contact">Contact</a>      </li>      <!-- Maybe the navigation bar gets more buttons in the future. -->    </ul>  </nav>
  <h1>Test Test Test</h1></header>

Can't center navigation menu

Just try to add some css-flex properties to your list :

ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

Is there a way for me to center the LI in my navigation bar?

On your min-width media query on .navbar nav use justify-content: center; instead of space-between so that your ul is centered. Then set another media query instructing the same width but max-width and then change it back to justify-content: space-between; to position your logo.

I've added a fiddle since you are using SCSS.

how to center css navigation bar

Change your last two CSS rules to:

li {
    display:inline-block;
}
#menu {
    background-color:#98bf21;
    text-align:center;
}

jsFiddle example

Centering Page Links on Nav Menu

.nav ul {
    list-style: none; 
    width: 960px;
    margin: 0 auto;
    padding: 0; 
    text-align: center;
}

.nav li {
    display: inline-block;
}