Bootstrap dropdown menu disappears after clicking toggler-icon

Question

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:


    
    
    
        
            Home (current)
            Services
            Contact
            About

My _Host.cshtml:

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




    
    
    Crunchsoft.techWebsite
    

    @*custom css*@
    

    
    

    @*Animation*@
    




    
        @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered))

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.

user_12439148 · Answer

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


        

        
        
            
                Home (current)
                Services
                Contact
                About

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

user_10458177 · Answer

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.

user_10981852 · Answer

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


        

        
        
            
                Home (current)
                Services
                Contact
                About

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

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

Bootstrap dropdown menu disappears after clicking toggler-icon

3 Answers