简体   繁体   中英

Menu bar mobile select the whole navbar instead of clicking the button

When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website: 点击后的菜单(点击右上角的实际按钮)

meanwhile, this is the relevant code for the navbar.php

<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
    <div class="navbar-header">
        <button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="brand">
        <a href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="index">Home</a></li>
            <li><a href="services">Services</a></li>
            <li><a href="about">About</a></li>

            
            <li><a href="contact">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="contact" class="book">Contact Us</a></li>
        </ul>
    </div>
</div>

also, not sure if it makes a difference although the PHP file is named navbar.inc.php Thank you for taking the time to read this post

<div class="brand">
    <a href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
</div>

Maybe you should carry brand class' properties to anchor tag and remove brand class.

<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>

Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM