CODEWITHSUNDEEP
htmlcssnav
vishnu padmanabhan
vishnu padmanabhan

Reputation: 21

<nav> element is overflowing the <header>

The<nav> element is not rendered inside the <header> element even though it is nested inside.

I tried adding the over-flow:hidden property to the <header> element, using the index-head class. I also tried adding both position:relative and position:absolute.

 *{
      margin: 0;
      padding: 0;
  }
  ul{
      list-style: none;
  }
  a{
      text-decoration: none;
  }
  .index-head{
      height: 90px;
      width: 100%;
      background-color: #000;
      overflow: hidden;
  }
  .logo{
      width: 50px;
      float: left;
      margin: 20px;
      margin-right: 0;
  }
  .brand-name{
      color: #ffc107;
      line-height: 90px;
      font-family: 'Catamaran', sans-serif;
  }
  .index-head nav{
      float: right;
      margin-top: 0;
      width: 50%;
  }
  .index-head nav ul li{
      list-style: none;
      display: inline-block;
      font-size: 25px;
      padding-left: 50px;
  }
<body>
    <header class="index-head">
        <a href="#"><img class="logo" src="images/logo.png"></a>
        <h1 class="brand-name">Eeat</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Signup</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>
</body>

Upvotes: 0

Views: 756

Answers (2)

cantuket
cantuket

Reputation: 1592

The simplest way to get the <nav> inside the <header> is to set the <h1.brand-name> element to display:inline-block. By default browser agents set <hX> tags to display:block, which spans those elements 100% of the available space and in this case is was pushing your <nav> down below it. Since the <header> has a fixed height this forced the <nav> outside.

I also added...

display: flex;
align-items: center;
justify-content: space-between;

To <header.index-head> to space the child elements evenly vertically and horizontally.

I then added flex-grow: 1; to the <nav> element, which makes sure it takes 'priority' when flex-box determines its width relative to its siblings.

Learn more about Flex Box

 *{
      margin: 0;
      padding: 0;
  }
  ul{
      list-style: none;
  }
  a{
      text-decoration: none;
  }
  .index-head{
      height: 90px;
      width: 100%;
      background-color: #000;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .logo{
      width: 50px;
      float: left;
      margin: 20px;
      margin-right: 0;
  }
  .brand-name{
      color: #ffc107;
      line-height: 90px;
      font-family: 'Catamaran', sans-serif;
      display: inline-block;
  }
  .index-head nav{
      float: right;
      margin-top: 0;
      width: 50%;
      flex-grow: 1;
  }
  .index-head nav ul li{
      list-style: none;
      display: inline-block;
      font-size: 25px;
      padding-left: 50px;
  }
<body>
    <header class="index-head">
        <a href="#"><img class="logo" src="images/logo.png"></a>
        <h1 class="brand-name">Eeat</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Signup</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </nav>
    </header>
</body>

Upvotes: 0

Maxim Karapysh
Maxim Karapysh

Reputation: 96

Because you added a "h1" tag inside the header, which by default has 

display: block

property that stretches the element to the entire width of the "header" element.

to solve this problem, you must add a css rule to the "h1" element

display: inline-block;

JSFiddle link: https://jsfiddle.net/nzf1egcr/1/

Upvotes: 1

Related Questions