Menú - Links escondidos con media query

 HTML

    <header class="header">

        <div class="container logo-nav-container">

         

          <a href="" class="logo">

            <img src="img/mklogo.png" alt="">

          </a>

         

          <span class="menu-icon">

              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Umbrella_Corporation_logo.svg/1024px-Umbrella_Corporation_logo.svg.png" alt="" height="45px" title="Clic aquí">            

            </span>

           

          <nav class="navigation">

            <ul>

              <li><a href="">Inicio</a></li>

              <li><a href="">Servicios</a></li>

              <li><a href="">Contacto</a></li>

              <li><a href="">Blog</a></li>

            </ul>

          </nav>

        </div>

      </header>

   

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="#ruta de tu archivo"></script>

CSS

body{

    width: 100%;

    margin: 0%;

    padding: 0%;

    font-family: 'Varela Round', sans-serif;

    font-size: 15px;

    color: rgb(0, 0, 0);

    overflow: hidden;

}

/**************   HEADER   **************/

header{

    height: auto;

    color: white;

    left: 0;

    top: 0;

    right: 0;

    position: relative;

    z-index: 1;

}

.logo-nav-container{

    height: 120px;

    display: flex;

    flex-flow: wrap;

    align-items: center;

    justify-content: space-around;

    background-image: url(https://besthqwallpapers.com/Uploads/4-5-2019/90085/thumb2-gray-snake-skin-texture-cobra-skin-texture-creative-background-snake-skin-background.jpg);

    background-position: center;

    box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

    -webkit-box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

    -moz-box-shadow: 4px 7px 21px -6px rgba(0,0,0,0.97);

}

.logo{

    display: flex;

    align-items: center;

}

.logo img{

    height: 120px;

}

.menu-icon{

    display: none;

}

.navigation ul{

    margin: 0;

    padding: 0;

    list-style: none;    

}

.navigation ul li{

    display: inline-block;

}

.navigation ul li a{

    font-size: 1rem;

    text-transform: uppercase;

    display: block;

    padding: 0.5rem 1rem;

    transition: all 0.3s linear;

    text-decoration: none;

    color: rgb(255, 255, 255);

    border-bottom: 2px solid transparent;

}

.navigation ul li a:hover{

    color: rgb(226, 226, 226);

    border-bottom: 2px solid white;

}

/**************** MEDIA QUERY ****************/

@media (min-width: 200px) and (max-width: 600px){

    

    .logo-nav-container{

        height: auto;

    }    

    .logo img{

        height: 80px;

    }

    .menu-icon{

        display: block;

        cursor: pointer;

    }

    .menu-icon img{

        height: 80px;

        border: 2px solid rgb(84, 255, 4);

        border-radius: 100%;

        margin: 10px 0px;

    }

    .navigation {

        width: 100%;

        clear: "";

        background: rgba(0, 0, 0, 0.39);

    }

    .navigation ul{

        display: none;

    }

    .navigation ul.show{

        display: block;

    }

    .navigation ul li{

        display: block;

    }

    .navigation ul li a{

        display: block;

        transition: .3s all linear;

        text-align: center;

    }

    .navigation ul li a:hover{

        color: rgb(0, 177, 9);

        background: rgb(255, 255, 255);

    }    

}

JS

jQuery('document').ready(function($){

    var menuBtn = $('.menu-icon'),

        menu = $('.navigation ul');

        menuBtn.click(function(){

            if (menu.hasClass('show')){

                menu.removeClass('show');

            }else {

                menu.addClass('show');

            }

        });

});