菜单栏移动 select 整个导航栏而不是点击按钮

Question

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

Answer 1

<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.