-1

What:
I'm following a simple tutorial on bootstrap and I have followed the instructions in parallel.

The Problem:
When I resize the webpage, it shows goes from showing Navigation items to showing the collapsed menu icon. When the page is smaller This is correct behavior, however, when I click on the hamburger menu (icon) nothing happens. There are no errors from the web page.

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
   
</head>

<body>
    

    <header class="container"> 
        
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <h1 class="navbar-brand">Welcome</h1>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#theMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            

            <div id="theMenu" class="navbar-collapse collapse">
               <ul class="navbar-nav">
                                    <li class="nav-item">
                                        <a class="nav-link" asp-controller="App" asp-action="Index"> Home </a>
                                        </li>
                                    <li class="nav-item">
                                        <a class="nav-link" asp-controller="App" asp-action="Blog"> Blog </a>
                                        </li>
                              
                                     
                                    <li class="nav-item">
                                        <a class="nav-link" asp-controller="App" asp-action="Contact"> Contact Us </a>
                                        </li>
                                
                 </ul>
            </div>
         
        </nav>
        </header>
    <section id="mainSection" class="container">
        <center><h2>@ViewBag.Title</h2></center>
    
    </section>
   

       <footer class="container">@footer
           <p>
           <div class="text-center">
               <div id="footerNavigation">
                   <span class="footerTitle">Navigation</span>
                   <ul>
                        <li><a asp-controller="App" asp-action="Index"> Home </a></li>
                        <li><a asp-controller="App" asp-action="Blog"> Blog </a></li>
            
                        <li><a asp-controller="App" asp-action="Contact"> Contact Us </a></li>
                      
                   </ul>
               </div>
           </div>
           </p>
       
       </footer>
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/js/main.js"></script>

   
</body>


     
    
    
</html>

Versions/Details: I am using asp.net (6) core MVC. and Bootstrap 5.1.3

GHostDeveloper
  • 1
  • 1

1 Answers1

-1

Found the issues. It appears to be a syntax change in bootstrap 5 and higher

previous line:

<button class="navbar-toggler" data-toggle="collapse" data-target="#theMenu">

Updated line:

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#theMenu">


The Change: I had to add "bs" to the button parameters for 'data-toggle' and 'data-target'
I tested the menu as working when collapsed when running the code with the updated line. Thank you all. I hope this helps anyone else following older guides.

GHostDeveloper
  • 1
  • 1