Please help me out to make this navbar responsive at (min-width: 992px)

First, I created this nav bar for mobile device, And after that I made it responsive for desktop, but I have tried lots of time to make it responsive at the width of min 992px. But I couldn't... Please help out make this nav bar responsive at min 992px. I want that when we come from the width of 1200px to 768px all the menu items replace with "More" one by one. According to width...

/*----------------------------------------------------------------------
        >>> Toggle Button
------------------------------------------------------------------------*/
function load_nav_menu() {
    var x = document.getElementById("load-top-nav");
    if (x.style.display === "block") {
        x.style.display = "none";
    }
    else {
       x.style.display = "block"; 
    }   
}

function load_cross() { 
        var y = document.getElementById("get-bar");
        y.classList.toggle("fa-times");
        y.classList.toggle("fa-bars");          
}

function load_search_bar() {
    var z = document.getElementById("get-search-bar");
    if (z.style.display === "inline-block") {
        z.style.display = "none";
    }
    else {
        z.style.display = "inline-block";
    }
}

/*---------------------------------------------------------------------------------
        >>> Body and Wrapper
----------------------------------------------------------------------------------*/
*{
        margin: 0;
        padding: 0;
}
body{
        font-family: 'Lato', sans-serif;
}
.qt-wrapper{
        margin: 0;
        padding: 0;
}

/*---------------------------------------------------------------------------------
        >>> Site Global Style
----------------------------------------------------------------------------------*/
a{
        text-decoration: none;
}
ul{
        list-style: none;
}

/*---------------------------------------------------------------------------------
        >>> Nav Bar
----------------------------------------------------------------------------------*/
.qt-nav{
        background-color: #0096d6;
        width: 100%;
        height: 46px;   
}

/*---------------------------------------------------------------------------------
        >>> Site Name or Logo
----------------------------------------------------------------------------------*/
.qt-name{
        display: inline-block;
}
.qt-name h3{
        color: #fff;
        font-size: 25px;
        margin: 0 18px;
        margin-top: 6px;
        margin-bottom: -1px !important; 
        display: inline-block; 
        cursor: pointer;
}

/*---------------------------------------------------------------------------------
        >>> Toggle Button
----------------------------------------------------------------------------------*/
.toggler{
        float: right;
        display: inline-block;
        margin: 7px 13px 0 0;   
}
.toggle-button{
        font-size: 23px;
        border: none;
        background-color: #0096d6;
        outline: none;
}
.toggle-button i{
        padding: 5px;
        cursor: pointer;
        color: #fff;
}

/*---------------------------------------------------------------------------------
        >>> Top Nav Menu
----------------------------------------------------------------------------------*/
.qt-top-menu{
        position: relative;
        display: none;  
}
.qt-top-menu ul{
        width: 100%;
        height: auto;   
        background-color: #0096d6;
        text-align: center;
}
.qt-menu-item li{
        display: block;
        margin: 11px;
        margin-bottom: 18px;    
}
.menu-item-6{
        padding-bottom: 13px;
}
.qt-menu-item a{
        color: #fff;
        font-size: 18px;
        padding-bottom: 5px;            
}
.qt-menu-item a:hover{
        border-bottom: 3px solid #fff;
}

/*--------Sub Menu--------*/
.qt-sub-menu a{
        display: none;
}
.qt-sub-menu-item{
        background-color: red;  
        position: absolute;
        margin-top: 18px;
        display: none;  
}
.qt-sub-menu-item a{
        display: block;
        margin:  7px 10px;      
}
.qt-sub-menu:hover .qt-sub-menu-item{
        display: inline-block;
}

/*--------------------------------------------------------------------------------
        >>> Top Nav Icons
---------------------------------------------------------------------------------*/
.top-nav-icon{
        float: right;
        display: none;
        margin: 8.5px 20px 0 0;
}
.top-icon{
        color: #fff;
        font-size: 22px;
        margin: 0 10px;
        cursor: pointer;        
}
/*--------------------------------------------------------------------------------
        >>> Search Bar
---------------------------------------------------------------------------------*/
.search-bar{
        margin: 10px 55px 0 0;
        display: none;
        float: right;

}
.search-bar form{       
        display: inline-block;
        padding: 0;             
}
.search-bar-form input{
        padding: 7px;
        border: 2px solid #0096d6;
}
.search-bar-form input[type=submit]{
        color: #fff;
        background-color: #0096d6;
        outline: none;
        font-weight: bold;
        cursor: pointer;
        font-size: 15px;
}
.search-bar-form input[type=submit]:hover{
        background-color: #007db3;
        border-color: #007db3;
}
.search-bar-form input[type=text]{
        width: 200px;
        font-size: 15px;
}

/*--------------------------------------------------------------------------------
                                                                >>> Media Query <<<
---------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) { 

/*---------------------------------------------------------------------------------
        >>> Toggle Button
---------------------------------------------------------------------------------*/
.toggler{
        display: none;
}
/*---------------------------------------------------------------------------------
        >>> Site Name or Logo
----------------------------------------------------------------------------------*/
.qt-name h3{
        margin: 0 30px; 
}

/*---------------------------------------------------------------------------------
        >>> Top Nav Menu
---------------------------------------------------------------------------------*/
.qt-top-menu{
        display: inline-block;
}
.qt-top-menu ul{
        height: 45px;
}
.qt-menu-item li{
        display: inline-block;
        margin-left: 18px;
        margin-right: 18px;
}
.qt-menu-item a{
        font-size: 20px;
}

/*--------------------------------------------------------------------------------
        >>> Top Nav Icons
---------------------------------------------------------------------------------*/
.top-nav-icon{
        display: inline-block;
}

/*-----------------------------------------------.--------------------------------
        >>> Search Bar
---------------------------------------------------------------------------------*/

}

@media screen and (min-width: 992px) {

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index,follow">
    <title>Quotesly | Quotes from the Heart</title>
    <meta name="description" content="Quotesly offers a huge collection of life-changing quotes by the world's greatest writers, including William Shakespeare, Steve Jobs, Helen Keller, and Mahatma Gandhi.
    ">

    <!---------------------CSS Stylesheet------------------>
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-----------------------FontAwesome------------------->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!----------------------Google Fonts------------------->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&amp;display=swap" rel="stylesheet">

</head>
<body>
<div class="qt-wrapper">
    
    <!------------------------Nav Bar---------------------->    
    <nav class="qt-nav">

        <!--------------------Site Name-------------------->        
        <div class="qt-name">
            <h3 class="qt-name-text"><a href="#"></a>Quotesly</h3>
        </div><!--/Site Name-->

        <!-------------------Toggle Button-------------------->
        <div class="toggler">
            <button class="toggle-button" onclick="load_nav_menu()">
                <span onclick="load_cross()"><i class="fa fa-bars" aria-hidden="true" id="get-bar"></i></span>
            </button> 
        </div>

        <!-------------------Top Nav Menu------------------>
        <div class="qt-top-menu" id="load-top-nav">
            <ul class="qt-menu-item">
                <li class="menu-item-1"><a href="#">Home</a></li>
                <li class="menu-item-2"><a href="#">Authors</a></li>
                <li class="menu-item-3"><a href="#">Topics</a></li>
                <li class="menu-item-4"><a href="#">Picture Quotes</a></li>
                <li class="menu-item-5"><a href="#">Quotes of the Day</a></li>
                <li class="menu-item-6"><a href="#">Top Quotes</a></li>

                <!--Sub Menu-->
                <li class="qt-sub-menu"><a class="menu-item-7" href="#">More<i class="fa fa-caret-down fa-fw" aria-hidden="true"></i></a>
                    <div class="qt-sub-menu-item">
                        <a class="sub-menu-item-1" href="#">Topics</a>
                        <a class="sub-menu-item-2" href="#">Picture Quotes</a>
                        <a class="sub-menu-item-3" href="#">Quotes of the Day</a>
                        <a class="sub-menu-item-4" href="#">Top Quotes</a>
                    </div>    
                </li><!--/Sub Menu-->
            </ul>
        </div><!--/To Nav Menu-->

        <!---------------------------------Top Nav Icons------------------------------>
        <div class="top-nav-icon">
            <span id="top-search-icon" class="top-icon" onclick="load_search_bar()"><i class="fa fa-search" aria-hidden="true"></i></span>
            <span id="top-social-fb" class="top-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i>
            </span>
        </div>
    </nav><!--/Nav Bar-->

    <!-----------------------Search Bar------------------------>
    <div class="search-bar" id="get-search-bar">
        <form action="" class="search-bar-form">
            <input type="text" placeholder="Search Quotes...">
            <input type="submit" value="Search">
        </form>
    </div>
</div>

<!------------------Custome JavaScript------------------>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>