Flexbox not displaying in a row

Question

I made a drop down menu using flex-box and everything works but for some reason the li's display in a column instead fo a row by default. I even tried declaring it by using flex-driection: row;but still nothing changed. The only part of the nav-bar i want to be a column is the sub-navcontent.

header {
  border-color: #DC143C;
  background-color: #DC143C;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}

body {
  background-color: black;
}

@font-face {
  font-family: TransFormers;
  src: url('../fonts/Transformers Movie.ttf') format('truetype');
}

.nav-bar {
  background-color: #DC143C;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nav-bar li {
  position: relative;
  margin: 5px 8px;
  flex: 1;
}

.sub-nav {
  display: none;
  overflow: hidden;
  margin-top: -13px;
  font-size: .8em;
  background: black;
}

li:hover>.sub-nav {
  display: block;
}

.sub-nav li {
  border-bottom: solid 1px #DC143C;
}

.nav-bar a {
  border: 2px solid black;
  background-color: black;
  text-decoration: none;
  flex: 1;
  text-align: center;
  padding: 10px;
  color: #DC143C;
  font-size: 2em;
  font-weight: bold;
  font-family: TransFormers;
  display: flex;
  flex-direction: row;
}

.nav-bar a:active {
  text-decoration: underline !important;
}

.footer {
  border-color: #DC143C;
  background-color: #DC143C;
  color: black;
}

<div id="container">
  <header>

    <nav role="navigation" class="nav-bar">

      <ul class "nav-bar">
        <li><a href="index.html" ;>Home</a></li>
        <li><a href="#" ;>Shop</a>
          <ul class="sub-nav">
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
          </ul>
        </li>
        <li><a href="#archives" ;>Archives</a></li>
        <li><a href="#suggestions" ;>Suggestions</a></li>
      </ul>
    </nav>
  </header>
</div>

score -1 · Answer 1 · answered Nov 19 '17 at 19:11

The = sign is missing in <ul class "nav-bar">

header {
  border-color: #DC143C;
  background-color: #DC143C;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0;
}

body {
  background-color: black;
}

@font-face {
  font-family: TransFormers;
  src: url('../fonts/Transformers Movie.ttf') format('truetype');
}

.nav-bar {
  background-color: #DC143C;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nav-bar li {
  position: relative;
  margin: 5px 8px;
  flex: 1;
}

.sub-nav {
  display: none;
  overflow: hidden;
  margin-top: -13px;
  font-size: .8em;
  background: black;
}

li:hover>.sub-nav {
  display: block;
}

.sub-nav li {
  border-bottom: solid 1px #DC143C;
}

.nav-bar a {
  border: 2px solid black;
  background-color: black;
  text-decoration: none;
  flex: 1;
  text-align: center;
  padding: 10px;
  color: #DC143C;
  font-size: 2em;
  font-weight: bold;
  font-family: TransFormers;
  display: flex;
  flex-direction: row;
}

.nav-bar a:active {
  text-decoration: underline !important;
}

.footer {
  border-color: #DC143C;
  background-color: #DC143C;
  color: black;
}

<div id="container">
  <header>

    <nav role="navigation" class="nav-bar">

      <ul class="nav-bar">
        <li><a href="index.html" ;>Home</a></li>
        <li><a href="#" ;>Shop</a>
          <ul class="sub-nav">
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
            <li><a href="shirts.html" ;>Shirts</a></li>
          </ul>
        </li>
        <li><a href="#archives" ;>Archives</a></li>
        <li><a href="#suggestions" ;>Suggestions</a></li>
      </ul>
    </nav>
  </header>
</div>

"Vote to close" has an alternative solely for _a simple typographical error_, and we are meant to use that, ...so lead by example, as higher rep. users is suppose to, and combine with a comment — Asons, Nov 19 '17 at 19:48
lol didn't even notice that. Is there a way i can have the header not move when the menu drops down? — Recht88, Nov 19 '17 at 19:52
@Recht88 The answer to that is already available in a dupe link from a previous question of yours, https://stackoverflow.com/questions/28367928/absolute-and-relative-positioning-in-menu — Asons, Nov 19 '17 at 20:29

Flexbox not displaying in a row

1 Answers1