flex Items are not aligning vertically in navbar

Question

I am trying to get my both ULs align in center vertically(Cross axis). I was doing it in Sass and I may have gotten confuse because there was so much nesting. I am talking about ul that are direct child of nav i.e. "nav-main-list" and "nav-social-list".

This is my HTML code:

          * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #f3c6c6;
    }
    
    ul {
      list-style-type: none;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    nav {
      background-color: #d42e2e;
      height: 3rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-items: center;
      justify-content: center;
      color: whitesmoke;
    }
    nav ul {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 2rem;
    }
    nav ul li {
      height: 100%;
      margin: 0;
      margin-top: auto;
      padding: 0 0.5rem;
    }
    nav ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li:hover ul {
      margin: 1rem 0;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    nav ul li:hover ul li {
      width: 100%;
      background: #d42e2e;
      color: whitesmoke;
    }
    nav ul li:hover ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li ul {
      display: none;
    }
    nav .nav-main-list {
      text-transform: uppercase;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
    }
    nav .nav-social-list {
      justify-content: flex-end;
      font-family: "Courier New", Courier, monospace;
      font-size: 1rem;
      align-content: center;
      align-items: center;
    }

    <body>
    <nav>
        <ul class="nav-main-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Languages</a>
                <ul class="lang-list">
                    <li><a href="#">html</a></li>
                    <li><a href="#">css</a></li>
                    <li><a href="#">sass</a></li>
                    <li><a href="#">php</a></li>
                    <li><a href="#">jquery</a></li>
                </ul>
            </li>
            <li><a href="#">Frameworks</a>
                <ul class="frame-list">
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">Laravel</a></li>
                    <li><a href="#">Angular</a></li>
                </ul>
            </li>
            <li><a href="#">Tools</a>
                <ul class="tools-list">
                    <li class="a" href="#">Git</li>
                    <li class="a" href="#">Photoshop</li>
                    <li class="a" href="#">Github</li>
                </ul>
            </li>
        </ul>
        <ul class="nav-social-list">
            <li><a href="#">Fb</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Git</a></li>
            <li><a href="#">Codepen</a></li>
        </ul>
    </nav>
</body>

The problem is that both ul are on top and not in the center of navbar. I might do it correctly by re-coding from scratch but I want to find error or reason why it's not working.

Thank You and have a Nice Day!!!

Just add `display: flex; align-items: center;` to the `li` elements. It's explained in the duplicate. https://jsfiddle.net/d0xc5738/ — Michael Benjamin, Oct 12 '18 at 22:06

Yvonne Aburrow · Answer 1 · 2018-10-12T19:38:19.393

I think the issue you are seeing is to do with the padding & margins. I made a few tweaks to those, not sure if it's an improvement.

   * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background: #f3c6c6;
    }
    
    ul {
      list-style-type: none;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    nav {
      background-color: #d42e2e;
      height: 2.5rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-items: center;
      justify-content: center;
      color: whitesmoke;
    }
    nav ul {
      height: 100%;
      width: 50%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0 2rem;
      vertical-align: middle;
    }
    nav ul li {
      height: 100%;
      margin: 0;
      margin-top: auto;
      padding: 0.25rem 0.5rem;
    }
    nav ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li:hover ul {
      margin: 0.5rem 0 0.25rem 0;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    nav ul li:hover ul li {
      width: 100%;
      background: #d42e2e;
      color: whitesmoke;
    }
    nav ul li:hover ul li:hover {
      color: #d42e2e;
      background: whitesmoke;
    }
    nav ul li ul {
      display: none;
    }
    nav .nav-main-list {
      text-transform: uppercase;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
    }
    nav .nav-social-list {
      justify-content: flex-end;
      font-family: "Courier New", Courier, monospace;
      font-size: 1rem;
      align-content: center;
      align-items: center;
    }

<body>
<nav>
    <ul class="nav-main-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Languages</a>
            <ul class="lang-list">
                <li><a href="#">html</a></li>
                <li><a href="#">css</a></li>
                <li><a href="#">sass</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">Frameworks</a>
            <ul class="frame-list">
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">Laravel</a></li>
                <li><a href="#">Angular</a></li>
            </ul>
        </li>
        <li><a href="#">Tools</a>
            <ul class="tools-list">
                <li class="a" href="#">Git</li>
                <li class="a" href="#">Photoshop</li>
                <li class="a" href="#">Github</li>
            </ul>
        </li>
    </ul>
    <ul class="nav-social-list">
        <li><a href="#">Fb</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Git</a></li>
        <li><a href="#">Codepen</a></li>
    </ul>
</nav>

(See this great article from CSS Tricks for a complete guide to using flex.)

That didn't solve the problem. It placed li on below of one another. — Krishan, Oct 12 '18 at 17:22
oh sorry I assumed it was a sidebar nav. I will edit accordingly. — Yvonne Aburrow, Oct 12 '18 at 17:43
I've added `flex-direction: column` to `nav`, and `flex-direction: row` to `nav ul` but it looks pretty messed up :( — Yvonne Aburrow, Oct 12 '18 at 17:48
yeah sub-menus are meant to be drop-down and they are working like I wanted. let me update the style-sheet. — Krishan, Oct 12 '18 at 18:19
Here's one I prepared earlier: https://codepen.io/vogelbeere/pen/jxMVVG — Yvonne Aburrow, Oct 12 '18 at 18:24
You haven't use flex-box. That's the whole point here. It looks nice though. — Krishan, Oct 12 '18 at 18:31
true but it might help you with the positioning of the sub-nav. I wrote that a few years ago :) I ought to rewrite it with flex — Yvonne Aburrow, Oct 12 '18 at 18:33
I do not have problem with positioning, I want to do it with flex-box. Only thing that bugging me is why my code isn't working. — Krishan, Oct 12 '18 at 18:48
OK well I just turned the code in your post into a snippet so I could see what it does - seems to work nicely, so now I am confused — Yvonne Aburrow, Oct 12 '18 at 19:30
ok I have edited my answer as I realised the issue is with the vertical alignment of the text in the header, sorry for the confusion — Yvonne Aburrow, Oct 12 '18 at 19:39

flex Items are not aligning vertically in navbar

1 Answers1