I've got a dropdown from header div which has to push down the content(e.g. when you click This is Icon it appears Blue dropdown which has to push down h1 tags).

The problem is the height of two classes(header-bar__top, header-bar) which I can't change and I need them to be the same height. Is there a way to do that?

I can manipulate only these classes: .header-bar-mobile-drop-down__container, .header-bar-mobile-drop-down__item, .header-bar-mobile-drop-down__icon-button

.header-bar-mobile-drop-down__container {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__item {
  display: none;
  align-items: center;
  text-align: center;
}

.header-bar-mobile-drop-down__icon-button {
  color: #fff;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
}

.header-bar-mobile-drop-down__icon-button:focus .header-bar-mobile-drop-down__item {
  display: block;
  margin-top: 26px;
  height: 68px;
  color: black;
  background-color: blue;
}

.header-bar {
  height: 3.5rem;
  box-shadow: none;
  background-color: orange;
}

.header-bar__top {
  height: 3.5rem;
  z-index: 100;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar__container:after {
  content: "";
  display: table;
  clear: both;
}

<div>
  <div >
    <div >
      <div >
        <div >
          <button  tabindex="1">
                This is Icon
              </button>
          <div >
            This is my drop down
          </div>
        </div>
      </div>
    </div>
  </div>
  <h1>This need to be pushed down</h1>
  <h1>But instead</h1>
  <h1>The dropdown is getting overlayed</h1>
</div>

CodePudding user response：

use min-height instead of height on the header bar and header bar top otherwise it will stay the same height and the drop down will be show as overflow (which is why the content below doesn't move)

.header-bar-mobile-drop-down__container {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__item {
  display: none;
  align-items: center;
  text-align: center;
}

.header-bar-mobile-drop-down__icon-button {
  color: #fff;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
}

.header-bar-mobile-drop-down__icon-button:focus .header-bar-mobile-drop-down__item {
  display: block;
  margin-top: 26px;
  height: 68px;
  color: black;
  background-color: blue;
}

.header-bar {
  min-height: 3.5rem;
  box-shadow: none;
  background-color: orange;
}

.header-bar__top {
  min-height: 3.5rem;
  z-index: 100;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar__container:after {
  content: "";
  display: table;
  clear: both;
}

<div>
  <div >
    <div >
      <div >
        <div >
          <button  tabindex="1">
            This is Icon
          </button>
          <div >
            This is my drop down
          </div>
        </div>
      </div>
    </div>
  </div>
  <h1>This need to be pushed down</h1>
  <h1>But instead</h1>
  <h1>The dropdown is getting overlayed</h1>
</div>

If you can't change the height of the two classes, then I would move the drop down outside the header and use a checkbox toggle instead:

.header-bar-mobile-drop-down__container {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__icon-button {
  color: #fff;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

#dropdown-toggle {
  display: none;
}

.header-bar-mobile-drop-down__item {
  display: none;
  align-items: center;
  text-align: center;
  height: 68px;
  color: black;
  background-color: blue;
}

#dropdown-toggle:checked .header-bar-mobile-drop-down__item {
  display: block;
}

.header-bar {
  height: 3.5rem;
  box-shadow: none;
  background-color: orange;
}

.header-bar__top {
  height: 3.5rem;
  z-index: 100;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar__container:after {
  content: "";
  display: table;
  clear: both;
}

<div>
  <div >
    <div >
      <div >
        <div >
          <label for="dropdown-toggle"  tabindex="1">
            This is Icon
          </label>
        </div>
      </div>
    </div>
  </div>
  <input id="dropdown-toggle" type="checkbox">
  <div >
    This is my drop down
  </div>
  <h1>This need to be pushed down</h1>
  <h1>But instead</h1>
  <h1>The dropdown is getting overlayed</h1>
</div>