CODEWITHSUNDEEP
htmlcssnavigation
Kaleshe Alleyne-Vassel
Kaleshe Alleyne-Vassel

Reputation: 124

How can I get my fixed 100% menu to align in the centre?

Everything was going well until I decided that I wanted my fixed navigation menu to be full width. I can't seem to find a way to get the ul to align in the centre, whilst having its parent container as 100%. It was centred until I added the 100% property to its parent

JS Fiddle :https://jsfiddle.net/u504xgey/

nav {
  position: fixed;
  z-index: 1;
  background-color: #ff3300;
  width: 100%;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  transition: color 2s;
}

nav a:hover {
  color: yellow;
}

ul {
  display: block;
  margin: auto;
  list-style: none;
}

li {
  display: inline-block;
  color: #ffffff;
  margin: 10px 40px;
}
<header>
  <nav>
    <ul>
      <li>
        <a href="#landing">
          <h3>Home</h3>
        </a>
      </li>
      <li>
        <a href="#about">
          <h3>About</h3>
        </a>
      </li>
      <li>
        <a href="#projects">
          <h3>Projects</h3>
        </a>
      </li>
      <li>
        <a href="#contact">
          <h3>Contact</h3>
        </a>
      </li>
    </ul>
  </nav>
</header>

Upvotes: 0

Views: 37

Answers (3)

Antoine Bajard
Antoine Bajard

Reputation: 13

Or centering the UL text :

ul{
    margin: auto;
    list-style: none;
    text-align: center;
}

li{
    display: inline-block;
    color: #ffffff;
    margin: 10px 40px;
}

Upvotes: 0

Nir Berko
Nir Berko

Reputation: 1428

Just add margin: 0 property to your body selector.

body {
  background-color: #ffffff;
  font-family: "objektiv-mk1", sans-serif;
  color: #fffff;
  margin: 0;
}

Upvotes: 1

Goombah
Goombah

Reputation: 2855

Just set your UL to text-align: center and the padding for your UL to '0'.

JSFiddle

Upvotes: 2

Related Questions