Показать активную ссылку en responsive menu

Question

У меня возникли проблемы с отображением активной ссылки в верхней части моего отзывчивого меню, я хочу, чтобы она отображалась сверху, когда она выбрана, она уже применяет активный стиль css при выборе, но не имеет значения, t показывает это наверху, я не уверен, как это сделать, может быть, лейбл? Вот мой код

CSS

@media screen and (max-width:768px) { 
    ul.topnav li a { 
     display: inline-block; 
     color: #fff; 
     text-align: center; 
     padding: 20px 20px 20px 20px; 
     height: auto; 
     } 
    ul.topnav .active { 
     color: #ee1921; 
     border-bottom: none!important; 
     font-size: 20px; 
     } 
    ul.topnav.responsive { 
     position: relative; 
     } 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     right: 0; 
     top: 0; 
     } 
    ul.topnav.responsive li { 
     float: none; 
     display: inline; 
     } 
    ul.topnav.responsive li a { 
     display: block; 
     text-align: left; 
     font-size: 20px; 
     padding: 20px 20px 15px 20px; 
     } 
ul.topnav.responsive .active { 
     border-bottom: 1px solid #fff; 
     } 
} 

HTML

<ul class="topnav" id="myTopnav"> 
    <li><a class="navItem" href="FAQ-sports.html">Sports</a></li> 
    <li><a href="FAQ-casino.html" class="navItem">Casino</a></li> 
    <li><a href="#Slots" class="navItem">Slots</a></li> 
    <li><a href="#Vegas" class="navItem">Vegas</a></li> 
    <li><a href="#Bingo" class="active">Bingo</a></li> 
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> 
</ul><br><br> 

И сценарий JQuery является:

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script> 

Answer 1

Вы можете использовать display: flex; flex-direction: column; на родителе, изменить .active класс быть на li вместо этого (так, чтобы это было flex-child из flex-parent), затем .active { order: -1; }, чтобы положить это li в начале списка.

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

@media screen and (max-width:768px) { 
 
    ul.topnav li a { 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 20px 20px 20px 20px; 
 
    height: auto; 
 
    } 
 
    ul.topnav .active a { 
 
    color: #ee1921; 
 
    border-bottom: none!important; 
 
    font-size: 20px; 
 
    } 
 
    ul.topnav.responsive { 
 
    position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 20px; 
 
    padding: 20px 20px 15px 20px; 
 
    } 
 
    ul.topnav.responsive .active a { 
 
    border-bottom: 1px solid #fff; 
 
    } 
 
    .topnav { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .active { 
 
    order: -1; 
 
    } 
 
}

<ul class="topnav" id="myTopnav"> 
 
    <li><a class="navItem" href="FAQ-sports.html">Sports</a></li> 
 
    <li><a href="FAQ-casino.html" class="navItem">Casino</a></li> 
 
    <li><a href="#Slots" class="navItem">Slots</a></li> 
 
    <li><a href="#Vegas" class="navItem">Vegas</a></li class="active"> 
 
    <li class="active"><a href="#Bingo" class="">Bingo</a></li> 
 
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> 
 
</ul><br><br>