CODEWITHSUNDEEP
htmlcss
MarceDev
MarceDev

Reputation: 265

h1 and nav element refuse to properly line up

I've looked through several questions regarding this already; however, none of them seem to solve or cover this problem.

What is essentially happening is that the h1 and nav element end up side by side but aren't properly lining up. I've tried multiple display and float settings on each but none are working.

The CSS itself is relatively clean, perhaps flex is not working properly or i am not using it properly? I'm not sure whats causing the problem here help is greatly appreciated!

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      padding-top: 1.4rem;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
      }

      #navbar > nav {
       display: inline-block;
       padding-top: 2.1rem;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       display: inline-block;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }
<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>

Removing the h1 element allows to me properly add padding to the top of the nav element. While, having both only allows me to properly pad the h1. I'm sure padding isn't the best way to vertically center either but the problem remains.

UPDATE:

misalignment picture

I quickly marked up the screenshot which hopefully clarifies the problem. The red line on the bottom demonstrates how the text currently lines up. While the red line on the top demonstrates how the li elements should be vertically centered.

h1, nav element views

As this shows perhaps the bigger problem is how its currently setup as the elements don't "snap" if you will.

Upvotes: 0

Views: 328

Answers (2)

Supraja Ganji
Supraja Ganji

Reputation: 1207

display: inline-block; elements can be vertically center aligned by using vertical-align: middle;, just add it to both h1 and nav

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
       vertical-align: middle;
      }

      #navbar > nav {
       display: inline-block;
       vertical-align: middle;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       float: left;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }
<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>

Upvotes: 1

Abin Thaha
Abin Thaha

Reputation: 4633

You can try to use flexbox for your problem. Check the codepen sample. I think this was your requirement

.header-container {
  display: flex;
  max-width: 600px;
  align-items: center;
}

h1, nav {
  flex-grow: 1;
}

Check the codepen.

Upvotes: 1

Related Questions