Menu Toggle with Bootstrap 3

I have implemented two Bootstrap 3 navigation menus on a single page. One menu works fine when the toggle button is activated for responsiveness, but the other one doesn't work as expected. How can I resolve this issue?

Below are the code snippets for both menus:

Menu-1:

<nav class="navbar" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" id="slideTrigger" href="#"><i class="glyphicon glyphicon-chevron-down"></i> <span>More From Intuit</span></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <i class="glyphicon glyphicon-search"></i>
                        </div>
                    </form>
                    <ul class="nav navbar-nav">
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Cart</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-earphone"></i> +00 000 000 <i class=" glyphicon glyphicon-info-sign"></i></a></li>
                    </ul>
                </div>
            </nav>

Menu-2:

<div class="navbar" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse2">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#"><img src="img/logo.png" alt="" ></a>
                        </div>
                        <div class="navbar-collapse collapse navbar-collapse2 collapse2">
                            <ul class="nav navbar-nav left_buttons">
                                <li class="active"><a href="#">Products</a>
                                    <ul>
                                        <li><a href="">DropDown</a></li>
                                        <li><a href="">DropDown</a></li>
                                        <li><a href="">DropDown</a></li>
                                        <li><a href="">DropDown</a></li>
                                        <li><a href="">DropDown</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Addons</a></li>
                                <li><a href="#">Checks</a></li>
                                <li><a href="#">Support</a></li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right right_buttons">
                                <li><a href="#" class="btn btn-default trial_button">Free Trial</a></li>
                                <li><a href="#" class="btn btn-primary signin_button">Sign In</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

Answer №1

Consider utilizing data-toggle="collapse" instead of data-toggle="collapse2 on the button.navbar-toggle within the second menu.

This means that the .navbar-collapse2 and .collapse2 classes are not required in the div.navbar-collapse.

Additionally, assign an id to div.navbar-collapse and have the data-target in button.navbar-toggle point to this id rather than the class. Although referencing the class may function properly, it is recommended to utilize ids whenever possible, as they point directly to a native JavaScript method getElementById, as opposed to jQuery's $('.class'). This can lead to faster execution of your code.

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

How to Store Values from a ReadStream in an Array

I'm currently attempting to use a stream and the async/await keywords with the fast-csv library in order to read a CSV file synchronously. Unfortunately, the function I've written doesn't seem to be producing the expected output. My assumpt ...

Using the setTimeout function is essential for successfully extracting values in a Jquery each loop. Without

I created a loop to adjust the padding on an image tag placed atop another image. Strangely, it was only capturing the first one or two values until I added a setTimeout function, which seemed to fix the issue. Below is the jQuery code: $(document).ready ...

Utilizing API data sharing across AngularJS controllers

I am facing a challenge with my parent controller and its children controllers, as I want them all to share the data fetched from an Api service. Controllers: var app = angular.module('mymodule',[]); app.controller('main', ['$scop ...

The trio of Javascript, Ajax, and FormData are

I'm struggling with sending form values to a PHP file. Here's the code I have: <form role="form" id="upload_form" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="formlabel">Title< ...

I'm curious about the method used to create this body fadeIn effect

Recently, I stumbled upon the website "". I must say, it is truly remarkable. I can't help but wonder how the content on this page is cleverly faded in and slides up. This specific page caught my attention: ...

Verification response parameter not received from Google Authentication Express

I've been working on implementing a "sign in with Google" feature for my localhost website. Despite receiving the POST request, I noticed that it lacks the credential parameter. I'm unsure if this issue lies within the code or the API configurati ...

Encountering an issue while trying to set up Gulp js on my

I'm facing an issue while trying to set up Gulp js on my system. It seems like the installation is incomplete as running gulp -v in powershell gives the following output: [12:43:04] CLI version 1.3.0 [12:43:04] Local version 3.9.1 However, when att ...

Whenever I try to send multiple forms along with their data using JSON/AJAX, I keep running into a parsing

My website features a jQuery accordion plugin. To gather form data from multiple forms, I am using the following code: $('#form_values').val($('form').serialize()). The collected data is then submitted to my PHP file which includes: &l ...

Encountering a build error with Ubuntu, Node-Gyp, and Canvas – help needed!

Hey there, I'm having some trouble with installing the Canvas package. I've tried Package Versions 6.1.13 and 6.1.3 Here are my system details: Ubuntu 18.04.5, Node 12.18.4 LTS, Python 2.7, g++ installed, pkg-config installed, libjpeg installed ...

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

I am attempting to rebuild Vuex's Getting Started example by utilizing multiple components, yet I am struggling to understand how to call root methods from within these components

The project I'm working on can be found here. It is a simple one, but for the purpose of learning, I divided it into index and four js files (parent, child, root, and store). My challenge lies in figuring out how to call the increment and decrement ro ...

Clever ways to refresh the current page before navigating to a new link using ajax and jQuery

Here's a different perspective <a href="{{$cart_items->contains('id',$productItem->id) ? route('IndexCart'): route('AddToCart')}}" class="item_add" id="{{$productItem->id}}"><p class="number item_price ...

Removing the currently selected item from the OwlCarousel

I am trying to enable users to delete the item that is currently active or centered in an OwlCarousel. I have come across some code related to deleting items, but it seems to be a rare question: $(".owl-carousel").trigger('remove.owl.carous ...

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

Executing functions during the page loading process

I'm currently in the process of integrating a new payment method into a checkout page that does not have built-in support for it. The button on the page that redirects to an external payment portal requires specific parameters to be passed. I've ...

Unable to handle prepended <img> using Pixastic

I'm encountering a puzzling issue with my website's image display. Currently, I have implemented a jQuery script that successfully scans a folder to gather image sources and displays them as background images on the site. Everything works smooth ...

Despite having the correct image URLs, the images are failing to display in the custom section of Shopify

Currently, I'm in the process of developing a unique Shopify section that showcases text alongside images. To enable users to upload images via the theme customizer, I have implemented the image_picker settings within the schema. The issue I am facing ...

Retrieve information from an HTML form

Currently, I have a piece of Javascript that fetches the HTML for a form from the server using an XMLHttpRequest and then displays the form on the page. I am looking for a solution to extract the data that would be sent via POST if the form were submitted ...

Method for testing with Jest

I'm relatively new to Jest and I've been having trouble testing this particular JavaScript method: const parseData = (items) => { const data = []; const itemsCount = items.length; for (let i = 0; i < itemsCount; i += 1) { const el ...

Error found when combining a stopwatch with the react useState hook and setInterval, causing an additional interval to start when the stopwatch

I have implemented a stopwatch feature that includes start and pause buttons. The start button triggers setInterval while the pause button calls clearInterval. Initially, pressing start and then pause works correctly. However, if you press start again afte ...