Curtain Dropdown effect for dropdown menu not working

Question

I'm trying to copy the dropdown menu effect of this website ( for the mobile version ) :

https://www.servicepclaptop.ro/service-laptop-bucuresti/

I followed their example step by step for building the nav bar and now all I have to do is to animate it.

I'm unsure if the animation can be done with css only or it needs some javascript as well.

Here is my code : https://codepen.io/bunea-andrei/pen/gOoxoww?editors=1100

<div class="nav">


            <div class="object">
               <div class="a home-job b">
                <span class="material-icons" id="home-icon">home</span>
                  <span class="menu-text">Home</span>                   
               </div>
            </div>

               
            <div class="object">
                <div class="a about-us-job c" id="hover-color">
                    <span class="material-icons" id="about-us-icon">info</span>
                    <span class="menu-text">About us</span>
                    <span class="material-icons" id="expand-icon">expand_more</span>
                </div>

                <ul class="about-ul about-about-job"> <!-- about-about-job class is to prevent the dropdown menu from closing when i press the padding of this ul -->
                    <li class="about-li FAQ-job"><span class="material-icons" id="FAQ-icon">thumb_up</span>Frequently asked questions</li>
                    <li class="about-li about-about-job"><span class="material-icons" id="search-man-icon">person_search</span>About us</li>
                </ul>

             </div>

        
             <div class="object">
                <div class="a service-job d" id="hover-color">
                    <span class="material-icons" id="service-icon">build</span>
                    <span class="menu-text">Services</span>
                    <span class="material-icons" id="expand-icon">expand_more</span>
                </div>

                <ul class="services-ul service-service-job">
                    <li class="services-li computer-job"><span class="material-icons" id="computer-icon">dvr</span>Computer Repair</li>
                    <li class="services-li laptop-job"><span class="material-icons" id="laptop-icon">computer</span>Laptop Repair</li>
                    <li class="services-li web-job"><span class="material-icons" id="web-icon">language</span>Web Design</li>
                    <li class="services-li graphic-job"><span class="material-icons" id="graphic-icon">graphic_eq</span>Graphic Design</li>
                </ul>

             </div>
        
        
             <div class="object">
                <div class="a request-service-job e">
                    <span class="material-icons" id="request-service-icon">build_circle</span>
                    <span class="menu-text">Request Service</span>
                </div>
             </div>


             <div class="object">
                <div class="a contact-job f">
                    <span class="material-icons" id="contact-icon">markunread</span>
                    <span class="phone-edit menu-text">Contact</span>
                </div>
             </div>


        </div>  


@keyframes load {
        0% {height: 0px; padding: 0%;}
        100% {height: calc(442px + 10/100*100vw); padding: 5%;}
     }

    @keyframes gucci {
        0% {display:none;}
        100% {display:block;}
     }

       .nav-active{
           opacity: 1;
           pointer-events: auto;
           animation: load ease-in-out 1s;
       }

 burger.addEventListener("click", () => {
        

        nav.classList.toggle("nav-active");

        //Burger Animation
        burger.classList.toggle("toggle-burger-lines");


        // close the menu on scrolling
        window.addEventListener("scroll", function (event) {
            if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")) {
                nav.classList.remove("nav-active");
                burger.classList.toggle("toggle-burger-lines");
            }
        });

}

I've created the dropdown effect similar with the one they've got, but the rest of the divs inside my nav are staying still (not coming down one by one as they should) . I'm not sure what am i looking to do to replicate that animation.

I'm happy with some source from where I could inspire myself. I've tried so many different approaches today but i have a feeling it must be done with jquery and I've been looking in the wrong direction.

Answer 1

i think what's you are asking is that why your dropdown isnt starting from top . if that's you question add transform-origin: top center; to your .object:hover .about-ul and .object:hover .services-ul or any other hover and this will fix it.

const wrapperSlide = () => {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav");

      

    const cateaua1 = document.querySelector("#home-icon"); 
    const cateaua2 = document.querySelector("#contact-icon");  
    const cateaua3 = document.querySelector("#service-icon");  
    const cateaua4 = document.querySelector("#search-man-icon");  
    const cateaua5 = document.querySelector("#FAQ-icon");  
    const cateaua6 = document.querySelector("#request-service-icon");  
    const cateaua7 = document.querySelector("#computer-icon");  
    const cateaua8 = document.querySelector("#laptop-icon");  
    const cateaua9 = document.querySelector("#web-icon");  
    const cateaua11 = document.querySelector("#graphic-icon"); 
    const cateaua12 = document.querySelector("#about-us-icon"); 

    const cateaua10 = document.querySelector(".contact-job");
    const cateaua13 = document.querySelector(".home-job");  
    const cateaua14 = document.querySelector(".about-us-job"); 
    const cateaua15 = document.querySelector(".FAQ-job"); 
    const cateaua16 = document.querySelector(".about-about-job"); 
    const cateaua17 = document.querySelector(".service-job"); 
    const cateaua18 = document.querySelector(".computer-job"); 
    const cateaua19 = document.querySelector(".laptop-job"); 
    const cateaua20 = document.querySelector(".web-job"); 
    const cateaua21 = document.querySelector(".graphic-job"); 
    const cateaua22 = document.querySelector(".request-service-job"); 
    const cateaua23 = document.querySelector(".service-service-job"); 

    burger.addEventListener("click", () => {
        

        nav.classList.toggle("nav-active");

        //Burger Animation
        burger.classList.toggle("toggle-burger-lines");


        // close the menu on scrolling
        window.addEventListener("scroll", function (event) {
            if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")) {
                nav.classList.remove("nav-active");
                burger.classList.toggle("toggle-burger-lines");
            }
        });



        // Click outside to close it 
            window.addEventListener('mouseup', function (event) {
                if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")  && event.target != cateaua1  &&  event.target.parentNode != cateaua1 && event.target != cateaua2  &&  event.target.parentNode != cateaua2 && event.target != cateaua10  &&  event.target.parentNode != cateaua10  && event.target != cateaua3  &&  event.target.parentNode != cateaua3  && event.target != cateaua4  &&  event.target.parentNode != cateaua4  && event.target != cateaua5  &&  event.target.parentNode != cateaua5  && event.target != cateaua6  &&  event.target.parentNode != cateaua6  && event.target != cateaua6  &&  event.target.parentNode != cateaua6  && event.target != cateaua7  &&  event.target.parentNode != cateaua7  && event.target != cateaua8  &&  event.target.parentNode != cateaua8  && event.target != cateaua9  &&  event.target.parentNode != cateaua9  && event.target != cateaua11  &&  event.target.parentNode != cateaua11  && event.target != cateaua12  &&  event.target.parentNode != cateaua12  && event.target != cateaua13  &&  event.target.parentNode != cateaua13  && event.target != cateaua14  &&  event.target.parentNode != cateaua14  && event.target != cateaua15  &&  event.target.parentNode != cateaua15  && event.target != cateaua16  &&  event.target.parentNode != cateaua16  && event.target != cateaua17  &&  event.target.parentNode != cateaua17  && event.target != cateaua18  &&  event.target.parentNode != cateaua18  && event.target != cateaua19  &&  event.target.parentNode != cateaua19  && event.target != cateaua20  &&  event.target.parentNode != cateaua20  && event.target != cateaua21  &&  event.target.parentNode != cateaua21  && event.target != cateaua22  &&  event.target.parentNode != cateaua22  && event.target != cateaua23  &&  event.target.parentNode != cateaua23) {  //only if toggle was executed do this things
                    nav.classList.remove("nav-active");
                    burger.classList.toggle("toggle-burger-lines");                
                }
            });


        // Tap outside to close it 
        window.addEventListener('touchstart', function (event) {
            if (event.target != nav && event.target != burger && event.target.parentNode != burger && event.target.parentNode != nav && burger.classList.contains("toggle-burger-lines")  &&  event.target != cateaua) {  //only if toggle was executed do this things
                nav.classList.remove("nav-active");
                burger.classList.toggle("toggle-burger-lines");
            }
        });


                
        });

    }


wrapperSlide();

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*  remove the blue color of the phone number on iphones */
body span.normalphone a[href^="tel"] {
  color: inherit;
}

body p::-moz-selection,
span::-moz-selection,
h2::-moz-selection,
li::-moz-selection,
h3::-moz-selection,
h1::-moz-selection,
img::-moz-selection,
div::-moz-selection {
  background: #00273b;
  color: white;
}

body p::selection,
span::selection,
h2::selection,
li::selection,
h3::selection,
h1::selection,
img::selection,
div::selection {
  background: #00273b;
  color: white;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100px;
  background: #2e3136;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.burger {
  display: none;
}

.toggle-burger-lines .line1 {
  -webkit-transform: rotate(-45deg) translate(-4.5px, 4px);
  transform: rotate(-45deg) translate(-4.5px, 4px);
}

.toggle-burger-lines .line2 {
  opacity: 0;
}

.toggle-burger-lines .line3 {
  -webkit-transform: rotate(45deg) translate(-4.5px, -4px);
  transform: rotate(45deg) translate(-4.5px, -4px);
}

.line1,
.line2,
.line3 {
  -webkit-transition: ease-in 150ms;
  transition: ease-in 150ms;
}

.arrange-top {
  width: calc(100vw - 100px);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.arrange-left-side {
  width: 35%;
}

.left-side {
  text-align: left;
  float: left;
}

.logo {
  width: 207.82px;
  height: 67.2px;
}

.remote-support-box {
  height: 67.2px;
  width: 120px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.remote-support-button {
  width: 120px;
  height: 30px;
  font-family: "Poppins", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  background-color: #54595f;
  color: white;
  border-radius: 3px;
  border-style: none;
  cursor: pointer;
  float: right;
}

.arrange-right-side {
  width: 65%;
  height: 100px;
  padding: 40px 0 0 0;
}

.nav {
  display: block;
  height: 60px;
  float: right;
}

.object {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 60px;
  display: inline-block;
  font-size: 14px;
  padding-right: 22px;
  position: relative;
}

.menu-text {
  font-family: "Roboto", Helvetica, Arial, Lucida, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 17px;
}

.a {
  cursor: pointer;
  padding-bottom: 45px;
  height: 60px;
}

#home-icon,
#about-us-icon,
#request-service-icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 21px;
  margin-top: -10px;
  color: #85c236;
}

#contact-icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  font-size: 21px;
  margin-top: -7px;
  color: #85c236;
}

#service-icon {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 17px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
  color: #85c236;
}

#expand-icon {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  color: #85c236;
}

.a:hover {
  opacity: 0.7;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}

.about-ul {
  display: none;
  position: absolute;
  padding: 20px 0 0 0;
  z-index: 9999;
  width: 240px;
  background: #fff;
  border-top: 3px solid #85c236;
  background-color: #27292e;
}

.about-li {
  list-style: none;
  padding: 0 50px;
  font-family: "Roboto", Helvetica, Arial, Lucida, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

.about-li:first-of-type {
  line-height: 1.5rem;
}

.about-li:last-of-type {
  line-height: 4rem;
}

.about-li:hover {
  opacity: 0.7;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}

.object:hover .about-ul {
  display: initial;
  -webkit-animation: rotateX 300ms ease-in-out forwards;
  animation: rotateX 300ms ease-in-out forwards;
   transform-origin: top center;
}

@-webkit-keyframes rotateX {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  50% {
    -webkit-transform: rotateX(-20deg);
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

@keyframes rotateX {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  50% {
    -webkit-transform: rotateX(-20deg);
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

#FAQ-icon {
  font-size: 18px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
}

#search-man-icon {
  font-size: 24px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -8px;
}

.services-ul {
  display: none;
  position: absolute;
  padding: 20px 0 20px 0;
  z-index: 9999;
  width: 240px;
  background: #fff;
  border-top: 3px solid #85c236;
  background-color: #27292e;
}

.services-li {
  list-style: none;
  padding: 0 35px;
  font-family: "Roboto", Helvetica, Arial, Lucida, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 17px;
  line-height: 2.5rem;
  cursor: pointer;
}

.services-li:hover {
  opacity: 0.7;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
  
}

.object:hover .services-ul {
  display: initial;
  -webkit-animation: rotateX 300ms ease-in-out forwards;
  animation: rotateX 300ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes rotateX {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }
  50% {
    -webkit-transform: rotateX(-20deg);
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

#laptop-icon {
  font-size: 20px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
}

#web-icon {
  font-size: 21px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}

#graphic-icon {
  font-size: 21px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}

#computer-icon {
  font-size: 21px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}

@media only screen and (max-width: 980px) {
  header {
    width: 100vw;
    background-color: #27292e;
    height: 80px;
  }
  .remote-support-button {
    display: none;
  }
  .remote-support-box {
    display: none;
  }
  .arrange-top {
    z-index: 9999;
    height: 80px;
  }
  .menu-text {
    color: white;
    font-size: 14px;
    opacity: 0.8;
  }
  .logo {
    width: 133.57px;
    height: 43.19px;
  }
  .arrange-left-side {
    width: 80%;
    z-index: 9999;
  }
  img {
    width: 207.82px;
    height: 67.2px;
  }
  .arrange-right-side {
    width: 20%;
    height: 80px;
    padding: 0 0 0 0;
  }
  .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #27292e;
    width: calc(100vw - 80px);
    margin-top: 80px;
    border-top: 3px solid #3b5e00;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5%;
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }

  @keyframes load {
    0% {
      height: 0px;
      padding: 0%;
    }
    100% {
      height: calc(442px + 10 / 100 * 100vw);
      padding: 5%;
    }
  }

  .nav-active {
    opacity: 1;
    pointer-events: auto;
    animation: load ease-in-out 1s;
  }
  .object {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: block;
    font-size: 14px;
    padding-top: 0;
    padding-right: 0px;
  }
  .a {
    padding-bottom: 0;
    width: calc(100vw - 130px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    padding: 10px 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
  }
  .a:hover {
    background-color: #25282d;
  }
  #expand-icon {
    display: none;
  }
  #home-icon {
    margin-top: -4.5px;
  }
  #about-us-icon {
    margin-top: -5px;
  }
  #request-service-icon {
    margin-top: -4px;
  }
  #contact-icon {
    margin-top: -3px;
  }
  #FAQ-icon {
    margin-top: -6px;
    color: #85c236;
  }
  #search-man-icon {
    margin-top: -7px;
    color: #85c236;
  }
  #service-icon {
    margin-right: 3px;
  }
  #home-icon,
  #about-us-icon,
  #request-service-icon,
  #contact-icon,
  #search-man-icon,
  #FAQ-icon,
  #service-icon,
  #computer-icon,
  #laptop-icon,
  #web-icon,
  #graphic-icon {
    width: 16.8px;
    height: 16.8px;
    font-size: 18px;
  }
  .about-ul {
    display: block;
    position: relative;
    padding: 0 0 0 0;
    width: calc(100vw - 200px);
    border-top: none;
    background-color: #27292e;
    padding-left: 35px;
  }
  .about-li {
    padding-left: 0px;
    padding-right: 5%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    opacity: 0.8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    width: calc(100vw - 180px);
  }
  .about-li:first-of-type {
    line-height: initial;
  }
  .about-li:last-of-type {
    line-height: initial;
  }
  .about-li:hover {
    background-color: #25282d;
  }
  .object:hover .about-ul {
    display: block;
    -webkit-animation: none;
    animation: none;
  }
  #hover-color {
    background-color: #25282d;
  }
  .services-ul {
    display: block;
    position: relative;
    padding: 0 0 0 0;
    width: calc(100vw - 200px);
    border-top: none;
    background-color: #27292e;
    padding-left: 35px;
  }
  .services-li {
    padding: 10px 0 10px 0;
    line-height: initial;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    font-size: 14px;
    opacity: 0.8;
    width: calc(100vw - 180px);
  }
  .services-li:hover {
    background-color: #25282d;
  }
  .object:hover .services-ul {
    display: block;
    -webkit-animation: none;
    animation: none;
  }
  #laptop-icon {
    margin-top: -3px;
    color: #85c236;
  }
  #web-icon {
    margin-top: -5px;
    color: #85c236;
  }
  #graphic-icon {
    margin-top: -5px;
    color: #85c236;
  }
  #computer-icon {
    margin-top: -5px;
    color: #85c236;
  }
  .burger {
    width: 40px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .line1,
  .line2,
  .line3 {
    width: 24px;
    height: 3.2px;
    background-color: #fff;
    border-radius: 3px;
  }
  .line2 {
    margin: 3px 0 3px 0;
  }
}

@media only screen and (max-width: 395px) {
  .nav {
    padding: 5%;
    width: calc(100vw - 50px);
  }
  .a {
    padding: 7px 5%;
    width: calc(100vw - 90px);
  }
  .about-ul,
  .services-ul {
    padding-left: 40px;
    width: calc(100vw - 110px);
  }
  .about-li {
    padding-right: 0;
    width: calc(100vw - 120px);
  }
}

@media only screen and (min-width: 405px) and (max-width: 600px) {
  .about-ul,
  .services-ul {
    padding-left: 45px;
    width: calc(100vw - 130px);
  }
}

@media only screen and (min-width: 500px) and (max-width: 980px) {
  .about-ul,
  .services-ul {
    padding-left: 55px;
    width: calc(100vw - 130px);
  }
}

@media only screen and (min-width: 500px) and (max-width: 980px) {
  .about-ul,
  .services-ul {
    padding-left: 65px;
  }
}

@media only screen and (min-width: 830px) and (max-width: 980px) {
  .about-ul,
  .services-ul {
    padding-left: 75px;
  }
}

@media only screen and (min-width: 980px) and (max-width: 1300px) {
  .remote-support-button {
    display: none;
  }
  .remote-support-box {
    display: none;
  }
  .arrange-top {
    width: calc(100vw - 60px);
  }
}

@media only screen and (min-width: 980px) and (max-width: 1116px) {
  .arrange-left-side {
    width: 25%;
  }
  .arrange-right-side {
    width: 75%;
  }
}

@media only screen and (min-width: 640px) and (max-width: 980px) {
  .nav {
    width: calc(100vw - 80px);
  }
  .a {
    padding: 10px 20px;
    width: calc(100vw - 160px);
  }
  .about-li,
  .services-li {
    width: calc(100vw - 210px);
  }
  .about-ul,
  .services-ul {
    width: calc(100vw - 210px);
  }
}

@media only screen and (min-width: 800px) and (max-width: 980px) {
  .a {
    padding: 10px 20px;
    width: calc(100vw - 190px);
  }
  .about-li,
  .services-li {
    width: calc(100vw - 230px);
  }
  .about-ul,
  .services-ul {
    width: calc(100vw - 230px);
  }
}

* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*# sourceMappingURL=style.css.map */

<header>

  <!-- link for all the icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <div class="arrange-top">

    <!-- arrange left -->

    <div class="arrange-left-side">
      <div class="left-side">
        <img class="logo" src="./images/logo/logo.jpg">
      </div>

      <div class="remote-support-box">
        <button class="remote-support-button">Remote support</button>
      </div>

    </div>

    <!-- arrange right -->

    <div class="arrange-right-side">
      <div class="nav">

        <div class="object">
          <div class="a home-job b">
            <span class="material-icons" id="home-icon">home</span>
            <span class="menu-text">Home</span>
          </div>
        </div>

        <div class="object">
          <div class="a about-us-job c" id="hover-color">
            <span class="material-icons" id="about-us-icon">info</span>
            <span class="menu-text">About us</span>
            <span class="material-icons" id="expand-icon">expand_more</span>
          </div>

          <ul class="about-ul about-about-job">
            <!-- about-about-job class is to prevent the dropdown menu from closing when i press the padding of this ul -->
            <li class="about-li FAQ-job"><span class="material-icons" id="FAQ-icon">thumb_up</span>Frequently asked questions</li>
            <li class="about-li about-about-job"><span class="material-icons" id="search-man-icon">person_search</span>About us</li>
          </ul>

        </div>

        <div class="object">
          <div class="a service-job d" id="hover-color">
            <span class="material-icons" id="service-icon">build</span>
            <span class="menu-text">Services</span>
            <span class="material-icons" id="expand-icon">expand_more</span>
          </div>

          <ul class="services-ul service-service-job">
            <li class="services-li computer-job"><span class="material-icons" id="computer-icon">dvr</span>Computer Repair</li>
            <li class="services-li laptop-job"><span class="material-icons" id="laptop-icon">computer</span>Laptop Repair</li>
            <li class="services-li web-job"><span class="material-icons" id="web-icon">language</span>Web Design</li>
            <li class="services-li graphic-job"><span class="material-icons" id="graphic-icon">graphic_eq</span>Graphic Design</li>
          </ul>

        </div>

        <div class="object">
          <div class="a request-service-job e">
            <span class="material-icons" id="request-service-icon">build_circle</span>
            <span class="menu-text">Request Service</span>
          </div>
        </div>

        <div class="object">
          <div class="a contact-job f">
            <span class="material-icons" id="contact-icon">markunread</span>
            <span class="phone-edit menu-text">Contact</span>
          </div>
        </div>

      </div>
    </div>

    <!-- had to place burger lines after all the categories i order to
          place it on the right in the phone version  -->

    <div class="burger">
      <!--  this is for the phone/tablet version -->
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>

  </div>

</header>

<script src="js/nav.js"></script>