Building a collapsible navigation menu with dropdown options using Twitter Bootstrap 3

I am struggling to replicate the functionality of the user menu found in this template. Here is a link to the template: (I have purchased the code but I am specifically looking into getting the user-menu feature to work correctly.) On mobile devices, when you click the button, it should display a dropdown menu, but for some reason, it's not working as expected. I've been stuck on this issue for quite some time now and would appreciate any advice or suggestions on how to improve my code overall.

Here is an example of the markup used, assuming standard less/css for Bootstrap 3:

<header class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="offcanvas" data-target=".sidemenu-offcanvas" id="nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <i class="icon-reorder" style="color: white;"></i>
        </button>

        <a class="navbar-brand" href="#">
            <img src="assets/images/logos/logo.png" alt="GEC Logo">
        </a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".profile-collapse">
            <span class="sr-only">Toggle user menu</span>
            <i class="icon-user" style="color: white;"></i>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".search-collapse">
            <span class="sr-only">Toggle search</span>
            <i class="icon-search" style="color: white;"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse profile-collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="dropdown ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="#" alt="John Smith">
                    John Smith <i class="caret"></i>
                    <span class="badge badge-red">5</span>
                </a>
                <ul class="dropdown-menu">
                    <li class="with-image">
                        <div class="avatar">
                            <img src="assets/images/avatar.png" />
                        </div>
                        <span>John Smith</span>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#/">
                            <i class="icon-user"></i>
                            <span>Profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-envelope"></i>
                            <span>Messages</span>
                            <span class="label label-red pull-right">5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-off"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="collapse navbar-collapse search-collapse navbar-right">
        <form class="navbar-form" action="" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
    </div>
</header>
jqueryhtmlcssdrop-down-menutwitter-bootstrap-3

Answer №1

Consider using the following code snippet:

$('.profile-collapse').on('show.bs.collapse',function()
{   
$('.profile-collapse .dropdown > a').hide();
});
$('.profile-collapse').on('shown.bs.collapse',function()
{
    $('.profile-collapse .dropdown').addClass('open');
});
$('.profile-collapse').on('hide.bs.collapse',function()
{
    $('.profile-collapse .dropdown').removeClass('open');
    $('.profile-collapse .dropdown > a').show();
});

You can add this after the boostrap JS is loaded or within the document ready function.

Update

I have some reservations about this solution as it appears to have a slow animation or lag. (@michael-stramel)

To handle the navbar toggling with more efficiency, utilize the collapse plugin which has a built-in time-consuming CSS3 transition effect on collapse actions. For further details, refer to: Turning off Twitter Bootstrap Navbar Transition animation

In such cases, try the following approach:

.profile-collapse.collapsing {
  -webkit-transition: height 0.0001s ease;
          transition: height 0.0001s ease;
}

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 can you change the alignment of items from vertical to horizontal using Bootstrap?

I'm looking to create a responsive layout similar to the design of duckduckgo.com. This page features a logo, the DuckDuckGo brand name in text form, and a search box. When I reduce the width of the browser window to nearly horizontal bar size, the th ...

csstwitter-bootstrap

What is the best way to ensure that my Bootstrap 4 columns occupy the full width of the row?

I started by creating a dynamic full-width border gradient. Now, I'm trying to replicate the layout with two large containers side by side, just like in Adobe XD. However, I'm facing an issue with increasing the width of the containers. Here are ...

htmlcssreactjsbootstrap-4containers

The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

function showEditStudentProfile() { document.getElementById('editstudentprofile').setAttribute('class', 'unhide'); document.getElementById('profile_viewStudent').setAttribute('class', ' ...

htmlcss

Reviving jQuery Smooth Zoom Pan viewer following container resize

I am in the process of developing a responsive image viewer and have decided to incorporate the Smooth Zoom Pan plugin for enhanced pan/zoom functionality. Within my layout, I have two primary panels: the viewer container and a controls container that are ...

javascriptjqueryresponsive

Incomplete filling of the SVG element is observed

Trying to animate SVG text to display only the outer stroke of each letter initially, followed by filling the interior with color. However, after the animation finishes, there are unfilled spaces left. Is there a property that can be applied to the SVG o ...

cssanimationsvg

Creating a circular text element with text both in the center and around the edges using CSS

I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...

htmlcsscss-selectorscss-animations

Is there a way to continuously loop a sequence of animations until it is stopped?

Can jQuery be used to achieve the following animations? Move a DIV element to left: -200px; top: -200px Transition the DIV element to left: 0px; top: -400px Animate the DIV element to left: -200px; top: -600px Repeat steps 1-3 until interrupted by a us ...

jqueryanimation

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

csshovercss-transitionscss-animationstransition

Webpack for customized white label sass/css styling

My goal is to produce multiple CSS files using webpack for a customizable application. I aim to execute the webpack CSS/SASS loaders once for each unique 'brand' and have it saved into individual files. This approach is necessary because I maint ...

csssasswebpackwhite-labelling

Creating dynamic stripes on MUI LinearProgress for lively animations

I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated. Here is the code snippet I have: import React, { FunctionComponent } ...

cssreactjssassmaterial-ui

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

javascripthtmlcssbootstrap-4

Issue with hamburger menu or modal not functioning properly in Rails 4 with Bootstrap 4 alpha3 and JS

I am encountering an issue while implementing the hamburger menu feature in rails 4 with bootstrap 4. Although the menu is displayed, the dropdown section is not functioning correctly. Despite referring to other resources, I have been unable to resolve thi ...

javascriptjqueryruby-on-railstwitter-bootstrapbootstrap-4

How to eliminate a hyperlink from an HTML element with the help of JQuery

Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...

javascriptjqueryhtmlcss

Error: The function of Bootstrap toggle is not defined

Currently, I am working on a Django application for warehouses and stockists. My goal is to create a list of stockists per warehouse in a button list format. When this button is clicked, a modal window should appear displaying the name, position, and permi ...

javascriptjquery

Send information from a dropdown selection to mysql database without needing to reload the page

Looking for a way to submit data from a dropdown menu to a PHP script without refreshing the page? Currently, when a user selects an option from the dropdown menu, the form action directs it to a PHP script that updates the database query. Below is the cod ...

phpjquerymysqlajaxforms

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform

Dynamic text in Bootstrap 5 Popovers

Having some trouble setting the text on a bootstrap popover: Here's the HTML: <span class="d-inline-block" id="searchPredict" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" tit ...

javascripthtmljquerybootstrap-5

Custom Native Scrollbar

Currently, there are jQuery plugins available that can transform a system's default scroll bar to resemble the iOS scroll bar. Examples of such plugins include . However, the example code for these plugins typically requires a fixed height in order to ...

javascriptjqueryhtmlcssslimscroll

The jQuery UI dialog box is malfunctioning and failing to return a value when the user clicks a button

I have a jQuery UI dialog box that I want to use for confirming a deletion action with the user. The issue I am facing is that the code below seems to return "True" or "False" immediately when the dialog pops up, even before the user has clicked the "Yes" ...

jqueryjquery-ui