1

I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of the information like the nav, opening hours, phone number, etc will all be inside the hamburger menu.

The thing I am sitting with is that, I don't really know where to place the div for the hamburger menu. I have built the header for pc screen-size but it all does mess up when I drag the screen to the size of the mobile screen. After watching tutorials and reading about the hamburger menu, I am still sitting here not knowing where to place the div for the hamburger menu and have everything except the logo inside the hamburger menu for tablets and mobile.

Added the code for a header in the snippet, it is showing up weird in the snippet. Probably because I have written a lot wrong, but it still works though:

picture of the header

So this is the full HTML and CSS code for the header:

let popup = document.getElementById("Contact-popup");



popup.addEventListener("click", () => {
  document.getElementById("contact_popup_page").style.display = "block";
});



let close = document.getElementById("close");
/** HEADER **/

body {
  margin: 0 10%;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #707070;
}

header {
  box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
  position: fixed;
  width: 80%;
  background-color: #fff;
  z-index: 100;
  margin-top: 0;
}

.header__main {
  width: 100%;
  display: grid;
  grid-template-areas: "box1  box2";
  color: #707070;
}

.logo__section {
  height: 100px;
  grid-area: box1;
  margin-left: 2.5%;
  width: 40%;
}

.header__main>.logo__section>a>img {
  width: 100%;
}

.nav__topRight {
  width: 100%;
  height: 100px;
  grid-area: box2;
  color: #000;
  flex-direction: column;
  margin-top: 0;
  align-items: flex-end;
}

.flexbox1 {
  margin: 1% 0 3% 0;
}

.nav__top {
  display: flex;
  justify-content: flex-end;
}

.nav__middle {
  display: flex;
  justify-content: flex-end;
  margin: 5% 3% 0 0;
  font-size: 1.8rem;
  color: #707070;
}


/** Contact */

input {
  outline: none;
  border: none;
}

textarea {
  outline: none;
  border: none;
}

.contact {
  font-size: 1.8rem;
  color: #707070;
}

.contact__info {
  margin-left: 5%;
}

.contact__info>p {
  color: #707070;
  display: inline;
  font-size: 1.8rem;
  margin: 0 15px 0 5px;
}

.contact_popup_page {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.close,
.closer {
  display: flex;
  justify-content: right;
  position: absolute;
  font-size: 50px;
}

textarea:focus,
input:focus {
  border-color: #fdb834 !important;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

textarea:focus:-moz-placeholder {
  color: transparent;
}

textarea:focus::-moz-placeholder {
  color: transparent;
}

textarea:focus:-ms-input-placeholder {
  color: transparent;
}

input::-webkit-input-placeholder {
  color: #707070;
}

input:-moz-placeholder {
  color: #707070;
}

input::-moz-placeholder {
  color: #707070;
}

input:-ms-input-placeholder {
  color: #707070;
}

textarea::-webkit-input-placeholder {
  color: #707070;
}

textarea:-moz-placeholder {
  color: #707070;
}

textarea::-moz-placeholder {
  color: #707070;
}

textarea:-ms-input-placeholder {
  color: #707070;
}

label {
  display: block;
  margin: 0;
}


/*---------------------------------------------*/

button {
  outline: none !important;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}


/*//////////////////////////////////////////////////////////////////
[ utility ]*/


/*//////////////////////////////////////////////////////////////////
[ Contact ]*/

.container-contact {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.wrap-contact {
  width: 500px;
  background: #fff;
  border-radius: 2px;
  padding: 30px 40px 40px 40px;
}


/*==================================================================
[ Form ]*/

.contact-form {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contact-form-title {
  width: 100%;
  display: block;
  font-family: Raleway-Black;
  font-size: 30px;
  color: #fdb834;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 45px;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input {
  width: 100%;
  position: relative;
  border: 1px solid #707070;
  border-radius: 2px;
  margin-bottom: 34px;
}

.rs1.wrap-input {
  width: calc((100% - 40px) / 2);
}

.label-input {
  font-family: Raleway-SemiBold;
  font-size: 13px;
  color: #fdb834;
  line-height: 1.5;
  text-transform: uppercase;
  width: 100%;
  padding-bottom: 11px;
}

.input {
  display: block;
  width: 100%;
  background: transparent;
  font-family: Raleway-SemiBold;
  font-size: 18px;
  color: #333333;
  line-height: 1.2;
  padding: 0 25px;
}

input.input {
  height: 35px;
}

textarea.input {
  min-height: 150px;
  padding-top: 19px;
  padding-bottom: 15px;
}


/*---------------------------------------------*/

.focus-input {
  position: absolute;
  display: block;
  width: calc(99% + 1px);
  height: calc(98%);
  top: -1px;
  left: 0px;
  pointer-events: none;
  border: 2px solid;
  border-color: #fdb834;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scaleX(1.1) scaleY(1.3);
  -moz-transform: scaleX(1.1) scaleY(1.3);
  -ms-transform: scaleX(1.1) scaleY(1.3);
  -o-transform: scaleX(1.1) scaleY(1.3);
  transform: scaleX(1.1) scaleY(1.3);
}

.input:focus+.focus-input {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}


/*------------------------------------------------------------------
[ Button ]*/

.container-contact-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -4px;
}

.contact-form-btn {
  font-family: Raleway-Bold;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 150px;
  height: 55px;
  border-radius: 27px;
  background: #fdb834;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact-form-btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  border-radius: 27px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 1;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact-form-btn:hover:before {
  opacity: 0;
}

.cart__link,
.giftcard__link {
  margin-right: 40px;
  font-size: 1.8rem;
  color: #707070;
}

.box3 {
  height: 40px;
  display: flex;
  flex-direction: row;
  margin-left: 2%;
}

.nav__bottom {
  width: 55%;
  justify-content: flex-start;
}

.help {
  margin-left: 25px;
  margin-right: 10px;
}

.favorite__link,
.help__link {
  color: #707070;
}

.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
  color: #fdb834;
}

.search {
  width: 45%;
  display: flex;
  position: relative;
  height: 40px;
  justify-content: flex-end;
  align-content: flex-end;
  margin: 0 2% 0 0;
  font-size: 1.8rem;
  color: #707070;
}

.search-box {
  background: #fff;
  height: 10px;
  padding: 5px;
  border: 1px solid #707070;
  border-radius: 2%;
  box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
  margin-left: 10px;
}

.search-btn {
  text-decoration: none;
  color: #707070;
  font-size: 2rem;
  width: 20px;
  height: 10px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  font-size: 1.4rem;
  transition: 0.4s;
  color: #707070;
  width: 15rem;
}

::placeholder {
  color: rgb(112, 112, 112, 0.7);
  font-size: 1.4rem;
}
<header>


  <div class="header__main">
    <div class="logo__section">
      <a href="index.html"><img src="https://kommunikasjon.ntb.no/data/images/00171/daaffdf6-fb0e-4e74-9b6b-7f973dbfa6a3.png/social" alt="logo" class="logo" /></a>
    </div>
    <div class="nav__topRight">
      <div class="flexbox1">
        <div class="nav__top">
          <a href="#" class="contact" id="Contact-popup">Contact us</a>

          <div class="contact_popup_page" id="contact_popup_page">
            <div class="container-contact">
              <div class="wrap-contact">
                <form class="contact-form validate-form">
                  <button class="close" id="close">&times;</button>
                  <span class="contact-form-title"> Contact Us </span>

                  <label class="label-input" for="first-name">Your Name *</label
                      >
                      <div class="wrap-input rs1 validate-input">
                        <input
                          id="first-name"
                          class="input"
                          type="text"
                          name="first-name"
                          placeholder="First name"
                        />
                        <span class="focus-input"></span>
                      </div>
                      <div class="wrap-input rs1 validate-input">
                        <input
                          class="input"
                          type="text"
                          name="last-name"
                          placeholder="Last name"
                        />
                        <span class="focus-input"></span>
                      </div>

                      <label class="label-input" for="email"
                        >Email Address *</label
                      >
                      <div class="wrap-input validate-input">
                        <input
                          id="email"
                          class="input"
                          type="text"
                          name="email"
                          placeholder="Eg. example@email.com"
                        />
                        <span class="focus-input"></span>
                      </div>

                      <label class="label-input" for="phone"
                        >Phone Number</label
                      >
                      <div class="wrap-input">
                        <input
                          id="phone"
                          class="input"
                          type="text"
                          name="phone"
                          placeholder="Eg. +47 000 00 000"
                        />
                        <span class="focus-input"></span>
                      </div>

                      <label class="label-input" for="message">Message *</label>
                  <div class="wrap-input validate-input">
                    <textarea id="message" class="input" name="message" placeholder="Please give us the detail here...."></textarea>
                    <span class="focus-input"></span>
                  </div>

                  <div class="container-contact-form-btn" id="contact-submit">
                    <button class="contact-form-btn">
                          <span> Submit </span>
                        </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="contact__info">
            <p>
              <i class="fas fa-phone-alt"></i> (+47) 000 00 000
            </p>
            <p class="opening__p">Mon-Fri (8-20) Sat (9-16)</p>
          </div>
        </div>
      </div>
      <div class="flexbox2">
        <div class="nav__middle">
          <div class="cart">
            <a href="#" class="cart__link"><i class="fas fa-shopping-cart"></i>

                  Cart</a
                >
              </div>
              <div class="giftcard">
                <a href="#" class="giftcard__link"
                  ><i class="fas fa-gift"></i>

                  Gift Card</a
                >
              </div>
              <div class="signin">
                <a href="#" class="singin__link"
                  ><i class="fas fa-user"></i>

                  Sing In</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box3">
        <div class="nav__bottom">
          <div class="navbar">
            <a href="men.html" alt="Men" class="nav-link">Men</a>
          </div>
          <div class="navbar">
            <a href="woman.html" alt="Women" class="nav-link">Women</a>
          </div>
          <div class="navbar">
            <a href="junior.html" alt="Junior" class="nav-link">Junior</a>
          </div>
          <div class="navbar">
            <a href="gears.html" alt="Gears" class="nav-link">Gears</a>
          </div>
          <div class="navbar">
            <a href="explore.html" alt="Explore" class="nav-link">Explore</a>
          </div>
          <div class="navbar">
            <a href="about.html" alt="About" class="nav-link">About</a>
          </div>
        </div>

        <div class="search">
          <div class="favorite">
            <a href="#" class="favorite__link"><i class="fas fa-heart"></i>

              Favorite</a
            >
          </div>
          <div class="help">
            <a href="#" class="help__link"
              ><i class="fas fa-info-circle"></i>

              Help</a
            >
          </div>

          <div class="search-box">
            <form action="">
              <input
                class="search-txt"
                type="text"
                placeholder="Search....."
                name="search"
              />

              <a class="search-btn" href="#"><i class="fa fa-search"></i></a>
            </form>
          </div>
        </div>
      </div>
</header>
halfer
  • 19,824
  • 17
  • 99
  • 186
Danier Valiev
  • 25
  • 6
  • Here's a really good article on how to make one: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp Keep in mind that if you're surprised your code is working you may have trouble getting it to work in various browsers. – Tony Drummond Oct 31 '20 at 01:14
  • kevin powel has a youtube video on hamburger menus in his channel. – cipherdragon Oct 31 '20 at 06:13

0 Answers0