Reputation: 170

Bootstrap dropdown menu disappears after clicking toggler-icon

I have copy pasted a navbar from bootstrap: https://getbootstrap.com/docs/4.3/components/navbar/

When i paste this code into my project, the navbar works except when I shrink the browser to mobile size and click on the hamburger menu. When I click on the menu, all of my appear, but they disappear very quickly after that. I also have to click the hamburger menu twice for the anchor tags to appear. This same thing happens to the navbar I have created which i will post below.

My code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <img id="navbarLogo" src="img/Home/Crunchsoft.techSignature.png">
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar"
        aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbar">
        <div id="navbar-items" class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Services</a>
            <a class="nav-item nav-link" href="#">Contact</a>
            <a class="nav-item nav-link" href="#">About</a>
        </div>
    </div>
</nav>

My _Host.cshtml:

@page "/"
@namespace Crunchsoft.techWebsite.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crunchsoft.techWebsite</title>
    <base href="~/" />

    @*custom css*@
    <link href="css/index.css" rel="stylesheet" />

    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    @*Animation*@
    <link href="assets/animate.css" rel="stylesheet" />


</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

I have tried putting scripts at the bottom of the page and putting bootstrap in different spots in my head tag to no avail.

I have already looked at lots of other stackoverflow solutions:

Bootstrap dropdown disappears after clicking it

Bootstrap 4 Toggle Checkbox within Dropdown menu

Keep Bootstrap dropdown open on click

And wasn't able to pull an answer that worked for me out of that.

On a more frustrating note, when i create my navbar in a fiddle, it works.

https://jsfiddle.net/MaxTaylor/6rftaw3o/1/

Edit: I have tried commenting out all of my style sheets except for bootstrap and i still have this problem. I'm using Blazor .AspNetCore. I tried this same thing using Visual Studio Code and it worked, but still not working in my Blazor project.

Upvotes: 2

Answers (3)

yuant-tobing

Reputation: 31

When we use bootstrap in the blazor project, we've to make a lot of adjustments so that the bootstrap javascript runs smoothly.

For me, if in the blazor project, I prefer to avoid using javascript for cases that can still be done by C# except for different cases that require me to access the javascript API.

Below is one example of your case that C# can still do

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>

        <button @onclick="toggleNavBar" class="navbar-toggler" type="button" aria-expanded="@expandedState" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse @cssShowMenu">
            <div id="navbar-items" class="navbar-nav">
                <a @onclick="collapsedNavBar" class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="Services">Services</a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">Contact</a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">About</a>
            </div>
        </div>
</nav>

@code {
    private bool expandedState = false;
    private string cssShowMenu = null;

    private void toggleNavBar()
    {
        expandedState = !expandedState;
        cssShowMenu = expandedState ? "show" : null;
    }

    private void collapsedNavBar()
    {
        expandedState = false;
        cssShowMenu = expandedState ? "show" : null;
    }
}

I hope this code snippet can help you or anyone out there. >_<

Upvotes: 3

Max Taylor-Hayden

Reputation: 170

I found the answer to my question. It seems that some Bootstrap components won't work with Blazor due to how Bootstrap manipulates the DOM.

So I wrote my own navbar inside a Razor component

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>

        <button onclick="toggleNavBar()" class="navbar-toggler" type="button"
                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar">
            <div id="navbar-items" class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="Services">Services</a>
                <a class="nav-item nav-link" href="#">Contact</a>
                <a class="nav-item nav-link" href="#">About</a>
            </div>
        </div>
</nav>

and then wrote my own JavaScript file for it:

function toggleNavBar() {
    var x = document.getElementById("navbar");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

And added the link in my _Host.cshtml

<script src="/javaScript/scripts.js"></script>

I guess because i'm using Blazor, it might make more sense to use C# in the same component rather than use JS in a separate file, but i was unable to figure out how to do the C#.

Upvotes: 1

Luke Pate

Reputation: 36

I tested your two snippets of code and from my perspective, they appear to be working as intended. This most likely means there's some CSS class overriding your hamburger functionality.

I can't see the custom css, so my suggestion would be to search within customSoftware.css and SeanStyle.css to see if anything in there is targeting your Button or hamburger classes.

Upvotes: 2

Bootstrap dropdown menu disappears after clicking toggler-icon

Answers (3)

Related Questions