Centering a navigation bar CSS

center navigation bar css w3schools
align navigation bar center
responsive centered navigation bar
how to center links in css
centered navbar bootstrap 4
css navigation bar
responsive navigation with centered logo
centered sticky navbar

I have a nav bar at the top of each page on my site. Here are the HTML and CSS:

HTML

<ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
</ul>

CSS

 ul {
    z-index: 100;
    position: fixed;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    background-color: #333;

}

li {
    float: left;

}

li a {

    display: block;
    color: white;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 20em;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    overflow: hidden;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #87372c;
    box-shadow: 0px 0px 50px #87372c;
    color: #000000;
    font-weight: 800;
    text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}

I've also set up a CodePen here: https://codepen.io/njpbray/pen/Rerabv

The bar isn't centered at all and it has an extra hanging portion to the left that doesn't react to hovering.

I'm not sure what's going on here. I thought that making something of width 80em and settings left and right margins to auto would make it rest center. I also thought an 80em width bar with 4 subdivision of 20em would be equally divided, but there's that bit on the left.

I would prefer to keep the bar fixed at the top though if possible. Some pages are long, and I want the user to be able to access the nav bar anywhere on the page.

To centralise the links, remove the float: left from li and set it to display: inline-block. Then simply set text-align: center on the <ul>.

The above is enough to centralise the blocks, but your content is still offset to the right of the page. To correct this, significantly shrink your width values. em is based on the font size, which is a good policy for text, but a poor choice for width. You can use percentages for responsiveness, or alternatively go with a fixed px unit depending on how 'indented' you want the links to be. I've gone with 100px for the links in my example.

And as you're making use of a <ul> element, you'll also want to remove the default padding, by setting padding: 0 on ul. This removes the left 'offset' you're seeing.

Finally, don't forget to set margin: 0 on body to get rid of that 8px of whitespace around the edges.

This can all be seen in the following:

body {
  margin: 0;
}

ul {
  z-index: 100;
  position: fixed;
  list-style-type: none;
  width: 100%;
  height: 3em;
  margin-left: auto;
  margin-right: auto;
  background-color: #333;
  text-align: center;
  padding: 0;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100px;
  margin-right: auto;
  margin-left: auto;
  text-decoration: none;
  overflow: hidden;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #87372c;
  box-shadow: 0px 0px 50px #87372c;
  color: #000000;
  font-weight: 800;
  text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="shifts.html">Shifts</a></li>
  <li><a href="partFive.html">Part Five</a></li>
  <li><a href="background.html">Background</a></li>
</ul>

Create a centred horizontal navigation – CSS Wizardry – Web , You could use text-align:center; but that won't work on 100%-width block-level elements either… that'll  A navigation bar does not need list markers; Set margin: 0; and padding: 0; to remove browser default settings; The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

You have the position set to fixed in your code. What you want is to set it to center.

ul {
    z-index: 100;
    position: center;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    background-color: #333;

}

https://codepen.io/anon/pen/dgGMva

I think you might be interested in going through the CSS tutorials at w3shcools. You will benefit immensely from this:

https://www.w3schools.com/Css/

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. enter image  I am having difficulty with centering the navigation bar on this page. I tried nav { margin: 0 auto; } and a bunch of other ways, but I still can't center it. What exactly do you mean by "centering this navigation bar"? – Peter Evjan May 13 '11 at 17:10. It's just that the child elements aren't. – David Thomas May 13 '11 at 17:11.

The better way to handle what you want to achieve is to wrap you top bar in an element which take the entire width 100% of the browser with it position property set to fixed and add the list as a sub element. And the space at the left of the first link it's due to the fact that by default the body tag have some margin and padding. You must remove it. the ul element have also same space padding and margin

html, body {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  position: fixed;
  background-color: blue;
}
ul {
    z-index: 100;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin: 0 auto;
    padding: 0;
    background-color: #333;

}
li {
    float: left;

}

li a {

    display: block;
    color: white;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 20em;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    overflow: hidden;
}
li a:hover:not(.active) {
    background-color: #111;


}

.active {
    background-color: #87372c;
    box-shadow: 0px 0px 50px #87372c;
    color: #000000;
    font-weight: 800;
    text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;

}
<header>
  <ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
  </ul>
</header>

How to center navbar with CSS - Programming Help, Hello Mentors, Could you please tell me how can I center the nav bar with just CSS? The code is  The navigation bar background should stretch the full width of the screen (not just the width of the centered content area), but. The navigation elements themselves should still be centered over the content area.

It's better with css3 and display:flex instead of float:left and inline-block

<header>
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
  </ul>
</header>

<main>
</main>

 

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: center;
}

ul {
  background-color: #333;
  display: flex;
  list-style-image: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 100;
}

li a {
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  width: 20em;
}
li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #87372c;
  box-shadow: 0px 0px 50px #87372c;
  color: #000000;
  font-weight: 800;
  text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}

main {
  height: 1500px;
}

https://codepen.io/anon/pen/qJbZMv

How do I center my horizontal navigation bar?, (Is one way better?) But I am having trouble with centering. I want the background of the bar to go the full  Method #3 is primarily using text-align:center; to center the nav. If your menu items (li/a) are a variable width, and you DON'T need a display block environment for the li/a, then this is the easiest way for you to center your nav. The essentail pieces of code used to center the nav are in bold. The CSS

As mentioned before: CSS3 and flex-box is supported by almost all relevant web-browsers. Use that instead. Here is a link for learning.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Center navbar - HTML & CSS, Hello!i tried to center my nav bar but i could not figure it out:))!(warning:i am a top class beginner)  The text inside the CSS navigation bar appears on the left side by default. You can easily change this rule by adding text-align:center to make sure that all links appear at the center of the navbar.

How To Center Your Navigation Menu Tutorial, home » code » css » css center nav the six best/easiest ways to center your navigation menu (AKA: nav, navbar,  You need to take the float:left off of both your #nav and li elements. Then add display:inline-block; to both. Next add your text-align:center to the #nav.. #nav { width: 100%; display: inline-block; text-align: center; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; margin-left: 0px; // looks like bootstrap is putting a left

How to center a nav bar - HTML, I was wondering how I can center my navigation bar. ``` A Complete Guide to Flexbox | CSS-Tricks. In recent implementations of CSS you can also use features from level 3, which allows centering absolutely positioned elements: Centering vertically in level 3 Centering vertically and horizontally in level 3 Centering in the viewport in level 3

Center align navigation menus, CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

Comments
  • Thank you. This is close to the effect I want. I don't actually want the bar to extend all the way across the page - only partially. I also want the boxes to touch each other, but not overlap. There's a bit of space between 'Home' and 'Shifts' when I run the snippet.
  • This isn't what I was asking about. I set it to fixed so that is would follow the user as they scroll. Also, changing fixed to center doesn't work. The bar remains in the exact state I described in the post.
  • Thank you. Is there a way to keep the bar fixed and centered? I want it to move with the user as they scroll down the page.
  • Yes! You can try! It's fixed at the top, I set the position of the header element to fixed