CODEWITHSUNDEEP
javascripthtmljquerycss
BruceyBandit
BruceyBandit

Reputation: 4324

hamburger menu won't close after clicking on the menu

I am having an issue with my bootstrap hamburger menu. When I click on the menu, it opens to display the links within, but when I click on it again or click anyway on the screen, it doesn't close the menu and I can't see what's causing this to break.

Is there a way to fix it? Even including some javascript or jquery as a workaround to toggle close or opening will help.

Below is the code:

<link rel="stylesheet" href="/../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">OUR COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">OUR SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT US</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

style.css

/*----------Navigation-------*/
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar-brand img
{
    height: 60px;
    width: auto;
    padding-left: 30px;
}
.navbar-nav li
{
    padding: 0 10px;
}
.navbar-nav li a
{
    float: right;
    text-align: left;
}
#nav-bar ul li a:hover
{
    color: #747c85!important;
}
.navbar
{
    background: #fff;
}
.navbar-toggler
{
    border: none!important;
}
.nav-link
{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

Upvotes: 0

Views: 2510

Answers (2)

CanUver
CanUver

Reputation: 1774

When I took your code into my own computer and examined it, I saw it was working. But the problem is that I prefer to keep bootstrap codes between body tags. Your problem may be caused by this. Choose body labels instead of Head labels. Also check your bootstrap links. May be incorrect.

!! İmportant:

There may be another problem. If you are using media query on your site, please check media query in the section where the navbar is responsive. A styling in that section may have produced incorrect results!!

/*----------Navigation-------*/
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar-brand img
{
    height: 60px;
    width: auto;
    padding-left: 30px;
}
.navbar-nav li
{
    padding: 0 10px;
}
.navbar-nav li a
{
    float: right;
    text-align: left;
}
#nav-bar ul li a:hover
{
    color: #747c85!important;
}
.navbar
{
    background: #fff;
}
.navbar-toggler
{
    border: none!important;
}
.nav-link
{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Website Design</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
>


</head>

<body>

<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">OUR COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">OUR SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT US</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>




</body>

</html>

Upvotes: 1

Serge
Serge

Reputation: 111

The problem is your html structure, there are many html tags, body tags and head sections misplaced. I removed some to test and at some point the menu worked, but of course the correct solution is to clean and order the entire structure.

Upvotes: 0

Related Questions