logo and hamburger icon move to top when the menu items toggled

user_2392106 0
Viewed 62

I want to create a collapsing menu with flexbox, but when I click the hamburger icon the LOGO and the hamburger icons get moved to the top which is annoying,

I think this is because of flexbox is trying to vertically re-center elements when the div.menu-items appears!

Any solution? here is the full snippet:

html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        box-sizing: border-box;
        font-size: 62.5%;
      }

      *, *:before, *:after {
        box-sizing: inherit;
      }

      body {
        margin: 0;
        line-height: 1.6;
        font-size: 1.6em;
        font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        margin: 0;
        padding: 0;
        color: #182c56;
        color: #4a4a4a;
      }

      img{
        vertical-align: middle;
        border-style: none;
      }

      .menu{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
        padding: .8rem 1.6rem;
        min-height: 10rem;

        background: #FFF;
        background: #efefef;

      }
      .brand, .menu-icon{
        background: magenta;
      }

      .brand{
        display: inline-block;

        font-size: 1.0625rem;
        white-space: nowrap;
        line-height: inherit;
      }

      .brand img{
        max-height: 4rem;
        padding-right: 1rem;
      }

      .menu-checkbox{
        display: none;
      }

      .menu-icon{
        line-height: 1;
        cursor: pointer;
        display: inline-block;
        padding: 1rem;
        user-select: none;
        background: magenta;
        margin-bottom: 0;
      }
      .menu-items {
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;

        display: none;

      }

      .menu-right a{
        flex-wrap: wrap;
        justify-content: center;
      }

      .menu-checkbox:checked ~ .menu-items
      {
        display: flex;
      }
<div class="menu sticky">
      <a class="brand">
        <img src="https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg" alt="">
      </a>
      <input class="menu-checkbox" type="checkbox" id="menu-collapse" />
      <label class="menu-icon" for="menu-collapse">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 18v1h-24v-1h24zm0-6v1h-24v-1h24zm0-6v1h-24v-1h24z" fill="#1040e2"/><path d="M24 19h-24v-1h24v1zm0-6h-24v-1h24v1zm0-6h-24v-1h24v1z"/></svg>
      </label>

      <div class="menu-items">
        <a href="#work">Our Work</a>
        <a href="#about">About</a>
        <a href="#careers">Careers</a>
        <a href="#contact">Contact</a>
      </div>

    </div>

flexbox css
2 Answers

Let's remove min-height: 10rem; from a .menu. And add a margin: 30px 0; to .brand. This will help to hold the menu minimal height without using min-height. 

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  line-height: 1.6;
  font-size: 1.6em;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 0;
  color: #182c56;
  color: #4a4a4a;
}

img {
  vertical-align: middle;
  border-style: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: .8rem 1.6rem;
  /*min-height: 10rem;*/
  background: #FFF;
  background: #efefef;
}

.brand,
.menu-icon {
  background: magenta;
}

.brand {
  display: inline-block;
  font-size: 1.0625rem;
  white-space: nowrap;
  line-height: inherit;
  margin: 30px 0;
  /* add this to hold a height */
}

.brand img {
  max-height: 4rem;
  padding-right: 1rem;
}

.menu-checkbox {
  display: none;
}

.menu-icon {
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  padding: 1rem;
  user-select: none;
  background: magenta;
  margin-bottom: 0;
}

.menu-items {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  display: none;
}

.menu-right a {
  flex-wrap: wrap;
  justify-content: center;
}

.menu-checkbox:checked~.menu-items {
  display: flex;
}
<div class="menu sticky">
  <a class="brand">
    <img src="https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg" alt="">
  </a>
  <input class="menu-checkbox" type="checkbox" id="menu-collapse" />
  <label class="menu-icon" for="menu-collapse">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 18v1h-24v-1h24zm0-6v1h-24v-1h24zm0-6v1h-24v-1h24z" fill="#1040e2"/><path d="M24 19h-24v-1h24v1zm0-6h-24v-1h24v1zm0-6h-24v-1h24v1z"/></svg>
      </label>

  <div class="menu-items">
    <a href="#work">Our Work</a>
    <a href="#about">About</a>
    <a href="#careers">Careers</a>
    <a href="#contact">Contact</a>
  </div>

</div>

UPDATED

Now with the addition element with min-height;

html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        box-sizing: border-box;
        font-size: 62.5%;
      }

      *, *:before, *:after {
        box-sizing: inherit;
      }

      body {
        margin: 0;
        line-height: 1.6;
        font-size: 1.6em;
        font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        margin: 0;
        padding: 0;
        color: #182c56;
        color: #4a4a4a;
      }

      img{
        vertical-align: middle;
        border-style: none;
      }

      .menu{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
        padding: .8rem 1.6rem;

        background: #FFF;
        background: #efefef;

      }
      
      .atlant {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        min-height: 10rem;
      }
      
      .brand, .menu-icon{
        background: magenta;
      }

      .brand{
        display: inline-block;

        font-size: 1.0625rem;
        white-space: nowrap;
        line-height: inherit;
      }

      .brand img{
        max-height: 4rem;
        padding-right: 1rem;
      }

      .menu-checkbox{
        display: none;
      }

      .menu-icon{
        line-height: 1;
        cursor: pointer;
        display: inline-block;
        padding: 1rem;
        user-select: none;
        background: magenta;
        margin-bottom: 0;
      }
      .menu-items {
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;

        display: none;

      }

      .menu-right a{
        flex-wrap: wrap;
        justify-content: center;
      }

      .menu-checkbox:checked ~ .menu-items
      {
        display: flex;
      }
<div class="menu sticky">
      <div class="atlant">
        <a class="brand">
          <img src="https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg" alt="">
      </a>
      </div>
      <input class="menu-checkbox" type="checkbox" id="menu-collapse" />
      <label class="menu-icon" for="menu-collapse">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 18v1h-24v-1h24zm0-6v1h-24v-1h24zm0-6v1h-24v-1h24z" fill="#1040e2"/><path d="M24 19h-24v-1h24v1zm0-6h-24v-1h24v1zm0-6h-24v-1h24v1z"/></svg>
      </label>
    

      <div class="menu-items">
        <a href="#work">Our Work</a>
        <a href="#about">About</a>
        <a href="#careers">Careers</a>
        <a href="#contact">Contact</a>
      </div>

    </div>

user_31871270

If you dont want them to move, you need to define their position, for example in here, i assign them a flex-start. You can put it in .menu-icon and .brand selector, may need some additional relative position config

If you want more space of the top, add more padding-top to .menu

html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        box-sizing: border-box;
        font-size: 62.5%;
      }

      *, *:before, *:after {
        box-sizing: inherit;
      }

      body {
        margin: 0;
        line-height: 1.6;
        font-size: 1.6em;
        font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        margin: 0;
        padding: 0;
        color: #182c56;
        color: #4a4a4a;
      }

      img{
        vertical-align: middle;
        border-style: none;
      }

      .menu{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto;
        padding: .8rem 1.6rem .8rem;
        min-height: 10rem;
        background: #FFF;
        background: #efefef;

      }
      .brand, .menu-icon{
        background: magenta;
      }

      .brand{
        display: inline-block;

        font-size: 1.0625rem;
        white-space: nowrap;
        line-height: inherit;
        align-self: flex-start;
        position: relative;
        top: 10px;
      }

      .brand img{
        max-height: 4rem;
        padding-right: 1rem;
      }

      .menu-checkbox{
        display: none;
      }

      .menu-icon{
        line-height: 1;
        cursor: pointer;
        display: inline-block;
        padding: 1rem;
        user-select: none;
        background: magenta;
        margin-bottom: 0;
        align-self: flex-start;
      }
      .menu-items {
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;

        display: none;

      }

      .menu-right a{
        flex-wrap: wrap;
        justify-content: center;
      }

      .menu-checkbox:checked ~ .menu-items
      {
        display: flex;
      }
<div class="menu sticky">
      <a class="brand">
        <img src="https://www.freecodecamp.org/news/content/images/2019/11/fcc_primary_large_24X210.svg" alt="">
      </a>
      <input class="menu-checkbox" type="checkbox" id="menu-collapse" />
      <label class="menu-icon" for="menu-collapse">
        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 18v1h-24v-1h24zm0-6v1h-24v-1h24zm0-6v1h-24v-1h24z" fill="#1040e2"/><path d="M24 19h-24v-1h24v1zm0-6h-24v-1h24v1zm0-6h-24v-1h24v1z"/></svg>
      </label>

      <div class="menu-items">
        <a href="#work">Our Work</a>
        <a href="#about">About</a>
        <a href="#careers">Careers</a>
        <a href="#contact">Contact</a>
      </div>

    </div>

user_83287850
Related