CODEWITHSUNDEEP
htmlcss
kh602
kh602

Reputation: 13

h1 not aligning with navigation bar

New to HTML/CSS and I'm trying to align the h1 with the navigation bar but it's not working. I want the header and the two navigation links to be on the same line.

.navigation {
  width: 100%;
  height: 80px;
  background: #2eb82e;
  display: inline-block;
}

.main-nav {
  display: inline-block;
  vertical-align: top;
  height: 0px;
  line-height: 0px;
  margin-left: 1000px;
}

h1 {
  font-size: 30px;
  color: whitesmoke;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 50px;
  margin-left: 20px;
  margin-top: 20px;
}
<section class="navigation">
  <nav>
    <header>
      <h1>Heading</h1>
    </header>
    <ul>
      <li class="main-nav"><a class="link" href="">Nav 1</a></li>
      <li class="main-nav"><a class="link" href="">Nav 2</a></li>
    </ul>
  </nav>
</section>

Would appreciate any help. Thanks!

Upvotes: 1

Views: 288

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7066

Here is you can do to make it simple:

  1. Since the nav are outside of header, you can making nav as position:relative; so that the nav elements will be relative to header.
  2. Then you can make position:absolute; to nav and made it top:25px; since you have your header as 50px(half to make it center).
  3. Margin-left is not needed I have removed that as well.

fiddle to play-around.

nav {
  position: relative;
}

.links {
  position: absolute;
  top: 25px;
  /* 25px because your header height is  50px, i made it center align */
  right: 10%;
}

.navigation {
  width: 100%;
  height: 80px;
  background: #2eb82e;
  display: inline-block;
}

.main-nav {
  display: inline-block;
  vertical-align: top;
  height: 0px;
  line-height: 0px;
}

h1 {
  font-size: 30px;
  color: whitesmoke;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 50px;
  margin-left: 20px;
  margin-top: 20px;
}
<section class="navigation">
  <nav>
    <header>
      <h1>Heading</h1>
    </header>
    <ul class="links">
      <li class="main-nav"><a class="link" href="">Nav 1</a></li>
      <li class="main-nav"><a class="link" href="">Nav 2</a></li>
    </ul>
  </nav>
</section>

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18973

You need remove margin-left: 1000px; in .main-nav and set padding-left for ul to 0

.navigation {
  width: 100%;
  height: 80px;
  background: #2eb82e;
  display: inline-block;
}

.main-nav {
  display: inline-block;
  vertical-align: top;
  height: 0px;       
  line-height: 0px;
  
}

h1 {
  font-size: 30px;
  color: whitesmoke;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 50px;
  margin-left: 20px;
  margin-top: 20px;
}

ul{
padding-left:0;
}
<body>
    <section class="navigation">
    <nav>
        <header><h1>Heading</h1></header>
            <ul>
                <li class="main-nav"><a class="link" href="">Nav 1</a></li>
                <li class="main-nav"><a class="link" href="">Nav 2</a></li>
            </ul>
    </nav>
    </section>

Upvotes: 1

Related Questions