Clicking on navigation does not close Bootstrap dropdown

When I use this code on my HTML page, the dropdown menu appears correctly. However, once I click a link, the menu does not close and remains open. How can I resolve this issue?

<div class="col-lg-8 col-md-8 col-xs-2 accordion-menu">
  <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar-collapse-toggle-1">
     <span class="sr-only">toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
  </button>
  <div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1">
    <ul class="nav navbar-nav navbar-left panel-group no-margin alt-font font-weight-700">
      <li><a href="#home" title="Home" class="inner-link" style="font-family:roboto;">Home</a></li>
      <li><a href="#creative" title="About" class="inner-link" style="font-family:roboto;">About</a></li>
      <li><a href="#our" title="Treatment" class="inner-link" style="font-family:roboto;">Treatment</a></li>
      <li><a href="#Aliments" title="Diseases" class="inner-link" style="font-family:roboto;">Diseases</a></li>
      <li><a href="#Therapy" title="Therapy" class="inner-link" style="font-family:roboto;">Therapy</a></li>
      <li><a href="#testimonial" title="Testimonials" class="inner-link" style="font-family:roboto;">Testimonials</a></li>
      <li><a href="#faq" title="FAQ" class="inner-link" style="font-family:roboto;">FAQ</a></li>
      <li><a href="#us" title="Contact US" class="inner-link" style="font-family:roboto;">Contact US</a></li>
    </ul>
  </div>
</div>

javascripthtmlcssbootstrap-4

Answer №1

@Dash, I've put together a working example using Bootstrap 4 below. Feel free to use it as a reference :)

<link href="http://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-8 col-md-8 col-xs-2">
  <nav class="navbar">
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">toggle navigation</span>
    </button>
    <div class="navbar-collapse collapse" id="navbarsExample01">
      <ul class="navbar-nav m-0 alt-font font-weight-700">
        <li class="nav-item active"><a href="#home" title="Home" class="nav-link" style="font-family:roboto;">Home</a></li>
        <li class="nav-item"><a href="#creative" title="About" class="nav-link" style="font-family:roboto;">About</a></li>
        <li class="nav-item"><a href="#our" title="Treatment" class="nav-link" style="font-family:roboto;">Treatment</a></li>
        <li class="nav-item"><a href="#Aliments" title="Diseases" class="nav-link" style="font-family:roboto;">Diseases</a></li>
        <li class="nav-item"><a href="#Therapy" title="Therapy" class="nav-link" style="font-family:roboto;">Therapy</a></li>
        <li class="nav-item"><a href="#testimonial" title="Testimonials" class="nav-link" style="font-family:roboto;">Testimonials</a></li>
        <li class="nav-item"><a href="#faq" title="FAQ" class="nav-link" style="font-family:roboto;">FAQ</a></li>
        <li class="nav-item"><a href="#us" title="Contact US" class="nav-link" style="font-family:roboto;">Contact US</a></li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="http://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>

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

Tips for Incorporating xmlhttp.responseText in If Statements

This is the code snippet from my save_custLog_data.php file: <?php $a = $_GET['custEmail']; $b = $_GET['pswrd']; $file = '/home/students/accounts/s2090031/hit3324/www/data/customer.xml'; if(file_exists($fi ...

javascriptphphtmlajax

Ng-show not updating when scope variable changes

Initially, I set the boolean flag of the infoWindow to false: $scope.infoWindow = false; Subsequently, I've added a google maps listener for a click event as shown below: google.maps.event.addListener(circle, 'click', function(event) { ...

javascriptangularjs

Pause and continue scrolling through the page with the push of a button

I have a question about a simple demo. I am looking to prevent scrolling when button1 is clicked, and then resume scrolling when button2 is clicked. Can someone guide me on how to achieve this? Check out the Fiddle here HTML: <input type='button& ...

javascriptjqueryhtml

Shifting the data label on a pie chart in ApexCharts - what's the trick?

I need help adjusting my data labels to make them more readable by moving them inward. It would be perfect if there is a way to dynamically center them within the slice. https://i.stack.imgur.com/bCelP.png Despite reading the documentation and trying dif ...

javascriptjqueryapexcharts

How to set a mandatory dynamic dropdown field in Contact Form 7 for WordPress

I am currently working on a Contact Form 7 with a dynamic dropdown feature that queries the database for available free trial classes. My goal is to make this dropdown a required field for form validation upon submission. I have successfully added the shor ...

javascriptphpwordpress

Include a selection of images within a popover box

I am currently working on a component that contains various experiences, each with its own popover. My goal is to display an array of images within each popover. Specifically, I have different arrays of images named gastronomiaExperience, deportesExperien ...

javascriptreactjsmaterial-ui

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

css

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

After 20 seconds of video play, a div element appears. I am trying to set up a cookie so that once the div is shown, it continues to appear unless the user clears their cache (cookie logic). This is my current attempt - http://jsfiddle.net/9L29o365/ Any ...

javascriptjqueryhtmlcsscookies

Is it feasible to display an image at a random position within a loop?

Is it possible to randomly position an image sourced from JSON data? I am uncertain about this. Here is a sample of what I am aiming for: https://i.sstatic.net/4AtGk.jpg This is my attempted code <div *ngFor="let item of img"></div <d ...

htmlcssbootstrap-4

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Automatically adjust height directive to fill up the remaining space

Is there a way to dynamically adjust the height of an element to fill the remaining space within its container? In my current layout, I have a fixed-height header (or menu) in pixels, a content area that may overflow the window height and require scroll b ...

layoutangularjshtmlangularjs-directive

CSS - Creating a Gradient Effect on div Borders for a Transparent Fade Effect across a Specified Distance

I am trying to achieve a fading effect for the background color of a div that contains a form. The solid background should fade out to transparent based on a pixel variable, allowing the background behind it to show through. This pixel value determines how ...

htmlcsslinear-gradients

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

htmlcss

I am encountering the error message "Utils is not defined" while attempting to generate a chart using chart.js

Attempting to replicate the example provided in chart.js documentation : link to example Unfortunately, I am encountering the error: Uncaught ReferenceError: Utils is not defined Despite its simplicity, I am struggling to identify the issue...! ...

javascriptchart.js

Tips on extracting information from several JSON response objects

I have the following ArrayList: JSONArray JMyDataList= new JSONArray(MyDataList); JSONArray JMyProjectData = new JSONArray(MyProjectData); MyDataList: contains data retrieved from a database with column names and data. response.setConten ...

javajavascriptjqueryajaxjson

Sorting in MongoDB aggregation operations

I have a database containing user activities, and I want to calculate the number of active users and activities they performed each month. The results should be sorted by year first and then by month within each year. Here is my query: query = { ...

javascriptpythonmongodbsorting

Unshrinkable item causing multiple lines text-overflow in a flexbox layout

My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...

htmlcssflexbox

Dear C# Tag Builder, I am looking for a way to add an attribute without a value in order

Attempting to create input checkbox HTML using Tag Builder in C#, ran into an issue trying to include the disabled field. The attribute doesn't allow null or empty values, so how can an attribute be added without a value? var builder = new TagBuilder ...

c#htmltagbuilder

What is the process for activating a script file once I have replaced HTML content using a backend method?

After receiving HTML content from the backend, including the <script> tags, I noticed that the scripts.js file does not seem to be activated. While the HTML content displays fine, changing the path to style.css successfully alters the appearance of ...

javascripthtmlasp.net-mvc

Deactivating Touchable Opacity Sounds in React Native

Currently, I am in the process of developing an application, utilizing TouchableOpacity instead of a button. I am looking to disable the auditory feedback that occurs when the TouchableOpacity component is pressed. <TouchableOpacity activeOpacity={1} to ...

javascriptreactjsreact-native