Grouping 3 section into header

[ritikawachat]

Continuing the discussion from Element changing its position on zooming:

As Paul said 3 top section should be group to header. I tried but layout becoming mess. Even tried defining some classes but still same issue. Any guidance or suggestion how should I group them without messing the layout Here’s code:https://codepen.io/Ritik-flaee/pen/WNYboee

[PaulOB]

If you change header to a div with a header-top class and then change the section element to a div with a header-mid class then the header element can now wrap all three blocks including the nav.

e.g.

<header>
  <div class="header-top">
    <ul class="left-breadcrumb">
      <li>Home</li>
      <li>/</li>
      <li>Career</li>
      <li>/</li>
      <li>Terms</li>
      <li>/</li>
      <li>Privacy</li>
    </ul>

    <ul class="right-breadcrumb">
      <li>Follow us :</li>
      <li>
        <img src="images/fb.png" alt="">
      </li>
      <li class="line"></li>
      <li>
        <img src="images/twit.png" alt="">
      </li>
      <li class="line"></li>
      <li>
        <img src="images/linkn.png" alt="">
      </li>
      <li class="line"></li>
      <li>
        <img src="images/instagm.png" alt="">
      </li>
    </ul>
  </div>

  <div class="header-mid">
    <ul class="left-section">
      <li>
        <img class="prog" src="images/programming.png" alt="">
      </li>
      <li class="pp">DGcom</li>
    </ul>

    <ul class="right-section">
      <li class="open">
        <div class="icon">
          <img src="images/clk.png" alt="">
        </div>
        <p class="pp1">Opening Hour</p>
        <p class="pp2">Mon - Fri , 8:00 - 9:00</p>
      </li>
    </ul>
    <ul class="right-section" style="padding-left: 7%;">
      <li class="open">
        <div class="icon flip">
          <img src="images/ph.png" alt="">
        </div>
        <p class="pp1">Call Us</p>
        <p class="pp2">+012 345 6789</p>
      </li>
    </ul>
    <ul class="right-section" style="padding-left: 4%;">
      <li class="open">
        <div class="icon">
          <img src="images/eml.png" alt="">
        </div>
        <p class="pp1">Email Us</p>
        <p class="pp2">info@example.com</p>
      </li>
    </ul>
  </div>

  <nav>
    <ul class="leftnav">
      <li>Home</li>
      <li class="menu">About Us</li>
      <li class="menu">Services</li>
      <li class="menu">Projects</li>
      <li class="menu">Pages</li>
      <li>
        <i class="arrow down opt"></i>
      </li>
      <li class="menu">Contact Us</li>
    </ul>

    <ul class="rightnav">
      <li class="button">Pro Version</li>
    </ul>
  </nav>
</header>

Then find all instances of header and section in your css and change to the class that was added.

.header-top {
  background-color: #f7f7f7;
  min-height: 31px;
  overflow: hidden;
  margin-top: -1px;
}
.header-top ul {
  height: 41px;
  margin-top: 0px;
}
.header-top li {
  display: inline-block;
  text-decoration: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: 15px;
  font-size: 15px;
  padding: 4px;
  margin: 0;
  color: #555;
  margin-bottom: -11px;
}
.left-breadcrumb {
  float: left;
  width: 40%;
}

.right-breadcrumb {
  float: right;
  width: 40%;
  text-align: right;
  margin-right: 74px;
}

.line {
  border-right: 1px solid #ccc;
  margin-left: -18px;
  padding: 8px;
}
.right-breadcrumb img {
  height: 13px;
}

p {
  padding: 0;
  margin: 0;
}

.header-mid {
  margin-top: 0px;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}
.header-mid li {
  display: inline-block;
}

That will keep the same look as you have now as it has simply swapped elements around.

I haven’t got time today as just going out but I would revise some of that html as already mentioned and remove the presentational elements (like .line) and reduce the use of a couple of those uls.

Remember to address the issue of heights as mentioned in the other thread and try to avid their use (and the magic number margins)

[ritikawachat]

Omg Paul I did it . Wrapped all three blocks into header. Now just have to tackle magic number.