Mobile devices are experiencing issues with collapsing the Bootstrap dropdown

Attempting to utilize Bootstrap for a responsive menu design.

Assistance needed in implementing the collapse feature for dropdown menus on mobile and tablet views.

At present, toggling opens the menu but there is no automatic closure mechanism.

HTML

    <!-- Navigation bar style -->
    <div class="culmn">
        <nav class="navbar navbar-default bootsnav navbar-fixed">
            <div class="navbar-top bg-grey fix">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="navbar-callus text-left sm-text-center">
                                <ul class="list-inline">
                                    <li><a href="tel:123456789"><i class="fa fa-phone"></i>123456789</a></li>
                                    <!--<li><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78a868e8b8f829582a78f828b97c984888a">[email protected]</a>"><i class="fa fa-envelope-o"></i> Contact Us: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b9b5bdb8bcb1a6b194bcb1b8a4fab7bbb9">[email protected]</a></a></li>-->
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="navbar-socail text-right sm-text-center">
                                <ul class="list-inline">
                                    <li><a target="_blank" href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a target="_blank" href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a target="_blank" href="#"><i class="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Start Search -->
            <div class="top-search">
                <div class="container">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <!-- <form id="search">
                            <input type="text" class="form-control" placeholder="Search">
                        </form> -->
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                    </div>
                </div>
            </div>
            <!-- End Search -->


            <div class="container">
                <div class="attr-nav">
                    <ul>
                        <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
                    </ul>
                </div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                    <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="index.html">
                    <div class="title">Logo</div>
                    <div class="sub-title">Logo Sub</div>
                </a>
            </div>

            <div id="navbar2" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a></li>
                    <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#features">Features</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown here</a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="one.html">One</a></li>
                    <li><a href="two.html">Two</a></li>
                    <li><a href="three.html">Three</a></li>
                    <li><a href="four.html">Four</a></li>
                    <li><a href="five.html">Five</a></li>
                    <li><a href="six.html">Six</a></li>
                    <li><a href="seven.html">Seven</a></li>
                    <li><a href="eight.html">Eight</a></li>
                  </ul>
                    <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About Us</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </li>
              </ul>
            </div>
        <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
        </nav>
    </div>
    <!-- End of navigation bar style -->

'Dropdown here' does not automatically close upon clicking again on mobile or tablet devices. Implementation of toggle needed for closure functionality.

Is there a recommended method through Bootstrap to enable automatic closure upon selection?

Alternatively, would manual jQuery scripting be necessary for achieving this feature?

htmlcsstwitter-bootstrapmobiledrop-down-menu

Answer №1

It seems like you forgot to include the nav tag to enclose all the content. When it comes to toggling between open and closed states, make sure to utilize the navbar-toggler class within the element that will trigger the navbar to expand or collapse.

Your code structure should resemble something similar to this:

<nav class="navbar navbar-expand-lg navbar-light navbar-fluid" id="navbar">

    <a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
        aria-expanded="false" aria-label="Toggle navigation">
        <p>Dropdown Content here</p>
    </a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div id="navbar2" class="navbar-nav">

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
                </li>
                <li>
                    <a data-toggle="collapse" data-target=".navbar-collapse" href="#features">Features</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown Content here</a>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="first.html">First</a>
                        </li>
                        <li>
                            <a href="second.html">Second</a>
                        </li>
                        <li>
                            <a href="third.html">Third</a>
                        </li>
                        <li>
                            <a href="fourth.html">Fourth</a>
                        </li>
                        <li>
                            <a href="fifth.html">Fifth</a>
                        </li>
                        <li>
                            <a href="sixth.html">Sixth</a>
                        </li>
                        <li>
                            <a href="seventh.html">Seventh</a>
                        </li>
                        <li>
                            <a href="eighth.html">Eighth</a>
                        </li>
                    </ul>
                    <li>
                        <a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a>
                    </li>
                    <li>
                        <a href="last.html">Other</a>
                    </li>
                </li>
            </ul>
        </div>
    </div>
</nav>

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

What is the best way to align the middle item of a flexbox using CSS?

I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section. Both the first and last flex items have classes tha ...

cssflexboxoverflowbootstrap-5

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Surprisingly, it seems that the canvas API does not support applying gradients to shadows in the way we expect: var grad = ctx.createLinearGradient(fromX, fromY, toX, toY); grad.addColorStop(0, "red"); grad.addColorStop(1, "blue"); ctx.strokeStyle = gra ...

javascripthtmlcanvas

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...

javascripthtmlnode.jsexpress

The navbar extends fully in height when viewed in Safari browser

My navbar design is flawless on most browsers, but in Safari it appears stretched at full screen height. Here's how it looks in other browsers: https://i.sstatic.net/H9noX.jpg https://i.sstatic.net/Embf3.png However, in Safari...not so much: https:// ...

csssafari

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

Typescript input event

I need help implementing an on change event when a file is selected from an input(file) element. What I want is for the event to set a textbox to display the name of the selected file. Unfortunately, I haven't been able to find a clear example or figu ...

htmlangulartypescriptinputonchange

Tips for transferring a json-encoded variable from a Python function to an embedded JavaScript code within an HTML file using Flask

I am currently working on integrating a sensor into my website using Python and JavaScript. The main challenge I am facing is passing the data retrieved from Python into my JavaScript code for display on the website. @app.route('/sensor', methods ...

javascriptpythonhtmljsonflask

Problems with the functionality of the hamburger menu

I've been trying to fix the hamburger menu on my personal website. On mobile, all the menu options are displayed in a single row, rather than the classic stacked look of a hamburger menu. Initially, the hamburger menu wasn't working at all. I f ...

jqueryhtmlcsstwitter-bootstrapfrontend

Add a class to a particular element within an ngFor loop

I wrote a loop that creates names along with icons. My goal is to make the icon appear only when it is hovered over. <div class="elm" *ngFor="let element of callWorkflowData?.jobsList"> <mat-card (mouseover)="hover=true" (mouseleave)="hover= ...

htmlcssangularngfor

What methods can be used to defer the visibility of a block in HTML?

Is there a way to reveal a block of text (h4) after a delay once the page has finished loading? Would it be necessary to utilize setTimeout for this purpose? ...

javascripthtml

Using arrays to update text in HTML5 Javascript

Excuse the mess in my code, I'm sure it's far from perfect in the eyes of coding professionals! But let me explain - I am currently working on a game where users have to answer questions with three options. The questions and answers are all store ...

javascriptarrayshtml

The X path and CSS selector for a particular table will vary on every page

Hello, I am new to HTML and currently working on a project that involves scraping data from html tables using RSelenium. I have managed to use the following code successfully: for(i in 1:50){ remDR$navigate(URLs[i]) CPSHList[[i]] <- remDR$getPageSou ...

htmlrseleniumxpath

Can text be both vertically and horizontally aligned in a div at the center?

By using only one tag and the corresponding CSS, we can achieve center alignment. Take a look at this example: http://jsfiddle.net/EqTsu/ <style> #test{ width: 100px; height: 100px; text-align: center; border: solid 1px #f ...

htmlcss

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

Tips for resolving issues in SQL Developer report containing embedded HTML codes

Example of Output When creating reports in Oracle SQL Developer that involve html embedded in queries, the formatting shows correctly in the sql dev query output. However, viewing the reports in Chrome only displays the html code used in the query without ...

htmlsqloracleoracle-sqldeveloper

Retrieve webpage using HTML stored in web storage

I am exploring a new idea for an application that utilizes local storage, and I am seeking guidance on the most effective way to load content after it has been stored. The basic concept of the app involves pre-fetching content, storing it locally, and the ...

javascriptjqueryajaxhtmllocal-storage

Several target elements on a single page

I am currently facing a problem with maintaining the active state of one anchor tag's target while clicking another button within the main identifier. Upon clicking the INTEL button, its opacity changes from 0 to 1. However, upon clicking Data Histor ...

htmlcss

Is it possible to display a "click" message when a button is hovered over using CSS?

Whenever I hover over a button, I struggle to receive the appropriate message like "click" or "enter" before actually clicking it. How can I use CSS to style my buttons in a way that allows for this pre-click messaging? I have tried approaches such as .bu ...

htmlcssbutton

Missing information in input field using JQUERY

I've been attempting to extract a value from an input tag, but all I keep getting is an empty string. Upon inspecting the frame source, it appears as follows: <input type="hidden" name="" class="code_item" value="00-00000159" /> In order to re ...

javascriptjqueryhtmlinput