Flex order for navigation bar incorrect

user_14244504 0
Viewed 60

I am trying to order my navigation bar so that the order is, nav, then button, then h1. I am following a tutorial here and it is the third option provided by the youtuber. The h1 should be pushed all the way to the right side. For some reason flex order will not work within the header and align it the correct way.

This is what it should look like: This is what it should look like

*{
  box-sizing: border-box;
  padding:0;
  margin:0;
}

body{
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li, a, button{
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

h1{
  cursor: pointer;
  margin-left: auto;
  order: 3;
}
nav{
  order: 1;
}

ul{
  list-style: none;
}

ul li{
  display: inline-block;
  padding: 0 20px;
}

ul li a{
  transition: all 0.3s ease;
}

ul li a:hover{
  color: pink;
}

.cta{
  order: 2;
}

button{
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover{
  background-color: pink;
  color: white;
}
<header>
  <a href="/index.html"><h1>Loonieville</h1></a>
  <nav>
      <ul class='navlinks'>
          <li><a href="/">Main St</a></li>
          <li><a href="/">Town Hall</a></li>
          <li><a href="/">Downtown</a></li>
      </ul>
  </nav>
  <a href="" class='cta'><button>
      Contact
  </button></a>
</header>

flexbox css html
2 Answers

You used h1 selector to order your h1, but h1 element is not a flex item. Only the direct children of a flex-container are flex items. In this case the h1 element is not a flex item, the anchor tag that is wrapped around it is.

Select the a tag with some class and then order it. Like this,

HTML

 <a href="#" class="logo"><h1>Loonieville</h1></a>

CSS

.logo{
  order: 3;
 }

Suggestion: Give flex items separate classes if you want to style them separately.

user_110386830

The problem is that order works on the direct child of the flexbox parent. You are trying to set the order of the h1 element like this, which sets the order of the h1 within it's parent element:

    h1{ order: 3; }

This would work if the h1 was a direct child of the header flexbox element, as you can see in this working example using your code here:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li,
a,
button {
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

h1 {
  cursor: pointer;
  margin-left: auto;
  order: 3;
}

nav {
  order: 1;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 0 20px;
}

ul li a {
  transition: all 0.3s ease;
}

ul li a:hover {
  color: pink;
}

.cta {
  order: 2;
}

button {
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: pink;
  color: white;
}
<header>
  <h1>Loonieville</h1>
  <nav>
    <ul class='navlinks'>
      <li><a href="/">Main St</a></li>
      <li><a href="/">Town Hall</a></li>
      <li><a href="/">Downtown</a></li>
    </ul>
  </nav>
  <a href="" class='cta'><button>
            Contact
        </button></a>
</header>

However, your h1 element is the child of the a element and not the header:

<header><a href="/index.html"><h1>Loonieville</h1></a>...</header>

This means the CSS is trying to set the order of the h1 within it's parent element which is the a.

What you need to do is set the order:3 CSS on the direct child of the flexbox parent, i.e. the a element itself. You can do this in a number of ways, e.g.

  • give the a element a class, like you did with the cta, e.g. a.linkWithH1 { order: 3; }
  • or simply apply this CSS to the first child of the parent: header :first-child { order: 3; }

Working Example:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li,
a,
button {
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

header :first-child {
  cursor: pointer;
  margin-left: auto;
  order: 3;
}

nav {
  order: 1;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  padding: 0 20px;
}

ul li a {
  transition: all 0.3s ease;
}

ul li a:hover {
  color: pink;
}

.cta {
  order: 2;
}

button {
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background-color: pink;
  color: white;
}
<header>
  <a href="/index.html">
    <h1>Loonieville</h1>
  </a>
  <nav>
    <ul class='navlinks'>
      <li><a href="/">Main St</a></li>
      <li><a href="/">Town Hall</a></li>
      <li><a href="/">Downtown</a></li>
    </ul>
  </nav>
  <a href="" class='cta'><button>
            Contact
        </button></a>
</header>

user_5148780
Related