JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav" class="c-nav">
  <div class="menu-trigger">menu</div>
  <div class="c-list c-main-menu">

    <h1 class="t1">
                <a href="" class="o-link">
                    Agency
                </a>
            </h1>
    <ul style="display: block;">
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#who-we-are">home</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#what-we-do">about us</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#team">team</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#services">services</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#process">process</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#clients">clients</a></li>
      <li class="c-main-menu__item"><a class="o-link c-main-menu__link" href="#work">work</a></li>
      <li class="c-main-menu__item">
        <a href="" class="o-card"></a>
      </li>
      <li class="c-main-menu__item">
        <a class="o-link c-main-menu__link c-main-menu__search" href="">
        </a>
      </li>
    </ul>
  </div>
</nav>
<div class="header-pusher"></div>
Subspecies Range map of the commonly accepted subspecies of the lion in the late twentieth century Between the late 18th and mid 20th centuries, 12 lion subspecies were described.[1] They were distinguished on the basis of appearance, size, and colour
of mane. As these characteristics vary highly between individuals, most of these forms were probably not true subspecies, especially as they were often based upon museum material that may have had "striking, but abnormal" morphological characteristics.[24]
Until 2016, eight subspecies were accepted and considered valid.[23][25] While the subspecific status of the Asiatic lion (P. l. persica) is generally accepted, the systematic relationships among African lions...

SCSS

* {
  margin:0;
  padding:0;
}

ul {
  list-style-type:none;
}

a {
 text-decoration:none; 
}


  .fixed {
    position: fixed;
    z-index: 999;
    padding: 0!important;
    color: #adadad;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    background: black;

}







@media (max-width:480px) {
  
 .header-pusher {
  height:58px;
} 
  
  
 .c-nav {
	width:100%;
    position: fixed;
    z-index: 9;
    padding:0;
        opacity:1!important;    
    background: black;    
}


.t1 {
    display:none;
    
    a {
    color:white;
    }
    
}

    .menu-trigger {
        display:block;        
        position: relative;
        z-index: 999999999999999;
        width:100%;
        padding:20px 0;
        text-align:center;
        color:white;
        background:#000;
        text-transform: uppercase;
    }




.c-main-menu {
    max-width:1200px;
    height:auto;
    
    
    
    ul {
        display: none;        
        width:100%;
        height:auto;
        right:0;
        background:orangered;
        opacity: .8;

        
        li {
            padding:20px 0;
            margin-right:0;            
            float:none;
            text-align:center;            
        }
    }
}   
  
}


@media (min-width:481px) {
  
 .header-pusher {
  height:140px;
} 
  
  
 .c-nav {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
padding-top: 20px;
    padding-bottom: 30px;
    transition: all .3s ease-in-out;    
    background: black;     
}


.t1 {
    display: inline-block;
    position:relative;
    left:-130px;
    top:25px;
    font-size:40px;
    font-family:"lato-black";
    a {
    color:white;
    }
    
}



    .menu-trigger {
        display:none;
        font-family:"lato-black";
    }


.c-mobile-menu {
    display: none;
}



.c-main-menu {
    display: block;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    height:90px;
    position: relative;
    
    
    
    ul {
 ...

JavaScript

//Mobile/Desktop Menu Switcher  

function displaymenu() {
    
    
    

  $(document).unbind("click.menuLinkEvent")
  if ($(window).width() <= 480) {

    $('.c-main-menu ul').css({
      display: 'none'
    });

      
    $(document).on("click.menuLinkEvent", "a.c-main-menu__link:not(a.c-main-menu__link[href='#main-header'])", function(event) {
      event.preventDefault();
      $('html,body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 56
      }, 800);
      $('.c-main-menu ul').slideToggle();
    });
    $(document).on("click.menuLinkEvent", "a.c-main-menu__link[href='#main-header']", function(event) {
        event.preventDefault();
      $("html, body").animate({ scrollTop: 0 }, 800);
      $('.c-main-menu ul').slideToggle();
    });      
    $('.c-nav .menu-trigger').click(function(ev) {
    	ev.stopImmediatePropagation()
      $('.c-nav .c-main-menu ul').slideToggle();
    });

  } else {

    $('.c-main-menu ul').css({
      display: 'block'
    });
    $(document).on("click.menuLinkEvent", "a.c-main-menu__link:not(a.c-main-menu__link[href='#main-header']):not(a.c-main-menu__link[href='#footer'])", function(event) {
      event.preventDefault();
      $('html,body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 90
      }, 800);
    });
    $(document).on("click.menuLinkEvent", "a.c-main-menu__link[href='#footer']", function(event) {
      event.preventDefault();
      $('html,body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
      }, 800);
    });      
    $(document).on("click.menuLinkEvent", "a.c-main-menu__link[href='#main-header']", function(event) {
        event.preventDefault();
      $("html, body").animate({ scrollTop: 0 }, 800);
    });      
  }
}


// displaymenu after window resize
var mega;
$(window).on("resize", function() {
  clearTimeout(mega);
  mega = setTimeout(displaymenu);
});

// displaymenu onload
displaymenu();




//add class...