<div class="header-menu">
            <div class="header-menu__logo">digital<span>.</span></div>
            <div class="header-menu__toggle" id="toggle" onclick="openMenu()">menu</div>
            <nav class="header-menu__navigation">
                <ul class="header-menu__list header-menu__list-mobile" id="list">
                    <li><a href="#">FEATURES</a></li>
                    <li><a href="#">OFFER</a></li>
                    <li><a href="#">PRICING</a></li>
                    <li><a href="#">CLIENTS</a></li>
                    <li><a href="#">FACTS</a></li>
                    <li><a href="#">PROJECTS</a></li>
                    <li><a href="#">TEAM</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </div>
.header-menu
  display: flex
  padding-bottom: 2%
  &__logo
    font-family: "Lato Heavy"
    font-size: 4.5vw
    color: #000
    span
      color: #fba419
  &__toggle
    display: none
  &__navigation
    text-align: right
    width: 100%
  &__list
    display: initial
    li
      list-style-type: none
      display: inline-block
      padding: 0 1.0625%
      a
        font-family: "Lato Bold"
        color: #000
        font-size: 1.1vw
        text-decoration: none
        
@media screen and (max-width: 375px)
  .header-menu
    width: 100%
    display: flex
    justify-content: space-around
    &__list
      display: none
    &__toggle
      display: initial
      text-align: center
      cursor: pointer
      font-family: Bernadette
      color: #000
      font-size: 2vw
      margin-top: 2%
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.