CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Irsyad Nurilhaq
Irsyad Nurilhaq

Reputation: 139

Bootstrap 4 navbar toggle button not working correctly

I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.

<title>SuperEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>


<div class="header">
  <div class="container">   
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <img src="img/iklan.JPG" class="iklan float-right">
      </div>
    </div>
    <div class="cleafix"></div>
    <nav class="navbar navbar-expand-lg " id="nav" >
    <a class="navbar-brand" href="#">Super Event</a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

Upvotes: 2

Views: 13630

Answers (2)

Alex Luca
Alex Luca

Reputation: 1

If you want to use Bootstrap 5, include just this in your HTML file: <script src="js/bootstrap.js"></script>

Implementation example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark">
        <div class="container-fluid">
            <!--LOGO IMAGE-->
            <a class="navbar-brand" href="#">
                <img src="images/img_avatar1.png" alt="Avatar Logo" style="width:50px;" class=" rounded-pill"> 
            </a>
            
            <a class="navbar-brand" href="#"><span style="font-size: 30px;">Alex Luca</span></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!--Using justify-content-end, you can align the links at the right-->
            <div class="collapse navbar-collapse justify-content-end text-center" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item px-3">
                        <a class="nav-link" href="#">Link</a>
                    </li>  
                    <li class="nav-item dropdown px-3">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Link</a></li>
                            <li><a class="dropdown-item" href="#">Another link</a></li>
                            <li><a class="dropdown-item" href="#">A third link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
      

    <div class="container-fluid mt-3">
        <h3>Navbar With Dropdown</h3>
        <p>This example adds a dropdown menu in the navbar.</p>
    </div>
    <!--For the dropdown menu and collapsed meniu-->
    <script src="js/bootstrap.js"></script>
    <script src="js/script.js"></script>
 
</body>
</html>

Upvotes: 0

vkatsuba
vkatsuba

Reputation: 1459

This can help:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

</body>
</html>

For more details follow by link - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Upvotes: 7

Related Questions