Dropdown div doesn't push down the content

August 8, 2022

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 class="header-bar">
    <div class="header-bar__top">
      <div class="header-bar__container">
        <div class="header-bar-mobile-drop-down__container">
          <button class="header-bar-mobile-drop-down__icon-button" tabindex="1">
                This is Icon
              </button>
          <div class="header-bar-mobile-drop-down__item">
            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>

>Solution :

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 class="header-bar">
    <div class="header-bar__top">
      <div class="header-bar__container">
        <div class="header-bar-mobile-drop-down__container">
          <button class="header-bar-mobile-drop-down__icon-button" tabindex="1">
            This is Icon
          </button>
          <div class="header-bar-mobile-drop-down__item">
            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 class="header-bar">
    <div class="header-bar__top">
      <div class="header-bar__container">
        <div class="header-bar-mobile-drop-down__container">
          <label for="dropdown-toggle" class="header-bar-mobile-drop-down__icon-button" tabindex="1">
            This is Icon
          </label>
        </div>
      </div>
    </div>
  </div>
  <input id="dropdown-toggle" type="checkbox">
  <div class="header-bar-mobile-drop-down__item">
    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>