w3.css topnav на маленьком экране

Question

На маленьких экранах навигация на верхнем навигаторе нужно дважды щелкнуть, чтобы открыть. Я не могу понять, в чем проблема. Я бы хотел, конечно, достичь состояния, когда пользователь нажимает на значок, который открывает topnav, и показывает остальные кнопки (в одной строке). Я должен иметь поле ввода поиска всегда в topnav.

<!--MAIN NAVBAR--> 
<ul class="topnav w3-card-4" id="myTopnav"> 
<div class="w3-content"> 
<li class="w3-hide-small"><a href="./index-w3.php"><i class="fa fa-home" title="úvodní strana"></i></a> 
    <li> 
    <div class="w3-container" id="searchbar"> 
    <div class="w3-row"> 
    <form class="w3-container" action="search-w3.php?action=find&amp;list_kind=users" method="post" name="form1"> 
    <div class="w3-col s10 m10 l10"><input type="text" name="search_string" id="search_string" class="w3-input w3-border-right w3-hover-border-red" placeholder="Vyhledej.."> </div> 
    <div class="w3-col s2 m2 l2"><button class="w3-btn w3-white" style=" padding: 8px 16px!important;"><i class="fa fa-search w3-text-hvalur-color"></i></button></div> 
    </form> 
    </div> 
    </div> 
    </li> 
    <li class="small-right"><a href="javascript:void(0)" onclick="w3_open_keyboard()"><i class="fa fa-keyboard-o"></i></a></li> 
    <li class="w3-right" style="cursor:pointer;"><a href="javascript:void(0)" onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-sign-in" title="login"></i></a></li> 
    <li class="w3-right"><a href="javascript:void(0)" onclick="w3_open_language()"><i class="fa fa-globe" title="jazyk"></i></a></li> 
    <li class="w3-right"><a href="javascript:void(0)" onclick="w3_open()">menu <i class="fa fa-caret-down"></i></a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> 
    </li> 
</ul> 
</div> 

Please see the whole code on the fiddle

Answer 1

Проблема заключается в том, что список topnav есть 2 классов topnav и w3-карт-4, но ваш JavaScript для мыши проверяет только topnav.

здесь является рабочей скрипкой: http://jsfiddle.net/xrakxv5p/

Таким образом изменить функцию переключения на это, если и хочет легко исправить основанную на вашей скрипке.

function myFunction(e) { 
    var x = document.getElementById("myTopnav"); 

    if (x.className === "topnav w3-card-4") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav w3-card-4"; 
    } 
}