Troubleshooting: Issue with Bootstrap 4 navbar toggle button functionality

Is it possible to manually control the opening and hiding of the navbar when the toggle button is clicked in bootstrap 4? Currently, my navbar automatically opens and closes when clicking the toggle button. Any suggestions on how to modify this behavior would be greatly appreciated. Thank you.

<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>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

This solution may be helpful:

<!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 further information, visit - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Answer №2

If you're looking to incorporate Bootstrap 5 into your project, simply add the following line to your HTML file: 

<script src="js/bootstrap.js"></script>

Here's an example of how to implement it:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficiently search and filter items across multiple tabs using a single search bar in the Ionic 2

I am currently working on implementing a single search bar that can filter lists in 2 different tabs within Ionic 2. The search bar is functional, and I have a method for filtering through objects. However, my goal is to allow users to select different tab ...

javascriptangularjstypescriptionic2filtering

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

No, this is not related to interviews or cryptocurrencies! :) It is for a non-profit personal web application designed to enhance a game. This question involves both finance and coding. I am developing this web app using Vue.js, so I prefer a JavaScri ...

javascriptvue.jsvuetify.js

The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here? #ubba { font-family: "Open Sans", sans-serif; font-size: 20px; ...

htmlcss

The Angular Material error message is indicating that the function registerInput is not defined for this._chipList, causing

Issue Description Currently, I am encountering an error when attempting to retrieve input from an <input> tag and showcase it as chips in the graphical user interface (GUI). The console displays the following error message: "TypeError: this._chipLis ...

htmlangularangular-material

Guide on populating a dropdown menu dynamically in php based on the selection made in another dropdown

Despite reviewing similar questions, I have not found a solution to my problem. I am attempting to retrieve a dropdown menu based on the selection of another dropdown. The first dropdown consists of school names, and upon selection, it should fetch the use ...

javascriptphpajaxoracledropdown

``Please proceed with the form submission only if it has been verified and

Within my web application, there are several pages that handle submitted data from forms. I would like to prevent the following scenario: A user creates a form on the client side with identical fields to my original form and sends it to the URL responsibl ...

phphtmlforms

Tips for adjusting a web address provided by a user

I have a JavaScript code that prompts the user to input a URL and then appends it to a div. The code is working fine, but now I am trying to add functionality to edit the entered URL by changing the width and height of any iframes before appending them. ...

javascripthtml

In Chrome, a horizontally floating item is pushed down, whereas in Firefox it remains in place

What is causing the last item in the submenu to be lower than the rest in Chrome, but aligned in Firefox? Check out this JSFIDDLE with font turned red for visibility View the ACTUAL SITE here I've experimented with padding, margin, vertical align, ...

htmlcssgoogle-chromefirefox

Time-driven occurrences in HTML

I want to create a daily event, like an alert box or a message displayed in a window, at 10 am on my webpage. How can I achieve this without constantly checking the time and wasting resources? ...

javascript

Guide on duplicating an HTML page with a button click

How can I duplicate HTML in a new tab when the following buttons are clicked: btn_change_folder_style_seg btn_change_folder_style_raw The content will be: <img src="./pic/web_show/3_seg/01.jpg" alt=""> <img src="./pic/web_show/3_seg/02.jpg" al ...

htmlcloneatag

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. https://i.sstatic.net/rz3r3.jpg Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } U ...

htmlcss

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

csscss-animations

Issue with TableHead not functioning properly when sorting is requested

I'm currently facing an issue with my table that has clickable row headers for sorting functionality using the onRequestSort function. Unfortunately, it seems like this feature is not working as expected. I have implemented the sorting logic using rea ...

javascriptreactjsmaterial-ui

Guide on utilizing the History API or history.js to dynamically update the "active" link based on page refreshes and back button presses

Highlighted active links using JS on my website. <script type="text/javascript> $(document).ready(function(){ $("a.nav1").click(function() { $(".active").removeClass("active"); $(this).addClass("active"); ...

javascriptjqueryhtmlhistory.jshtml5-history

Leveraging .tsx components within nested .tsx components in React Native

Currently, I am delving into the world of building apps using TypeScript in React Native. Coming from a background as a Swift developer, adjusting to JavaScript and TypeScript has been an interesting journey. An observation that stood out to me is the cha ...

javascripttypescriptreact-nativereact-tsx

Learn how to dynamically update a user's profile picture in the navbar when clicked using Angular

When I have a navbar (see code below) and set *ngIf = "user", I attempt to display the user's avatar in the navbar but only see a placeholder. However, after refreshing the page, the user avatar appears. Therefore, I am curious about how I can refresh ...

jqueryhtmlangularjstwitter-bootstrap

Implementing onClick functionality in RecyclerView post JSON data extraction

I recently implemented a RecyclerView in a fragment and successfully parsed JSON data from a website to display it in the RecyclerView following a helpful tutorial found at: Now, my next challenge is adding an onClick listener to the items in the Recycler ...

javascriptandroidjson

In what ways can we utilize a consistent state across various tabs or pages?

One feature of my application is a dynamic chart with various settings such as filters and time ranges. I want to save these settings in the app's state so they can be shared with other components on different pages. However, when switching tabs and r ...

javascriptjqueryreactjs

Create a dynamic layout with two navigational sub-menu blocks positioned side by side

When I hover over a navigation menu item, it brings up 6 sub menu items. I want these sub-items to appear in two blocks of 3 that are adjacent to each other. I tried using display: flex on the parent element .menu-item-1, but it doesn't seem to be wo ...

htmlcsslistflexbox

What is the process for establishing a connection between a websocket and an external API?

Currently, I have a route configured to fetch the weather data for a specific city using the openweathermap API Here is the code snippet from my index.js file: var express = require("express"), router = express.Router(); var weather = require("ope ...

javascriptexpresswebsocket