Tips for showcasing the chosen menu item in the toggle button of the Bootstrap framework

I have created a collapsible menu that is hidden when the browser is resized and should be displayed when the button is toggled.

Currently, I am using glyphicon-humberger in the toggle button. However, I would like to show the selected menu in the button instead.

<div class="container-fluid">
    <div class="navbar-header">
        <button id="button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <i class="glyphicon glyphicon-menu-hamburger"></i>                  
        </button>
        <a class="navbar-brand"><img src="sample.png"></a> 
        <div>
            <h4>DIRECTORY</h4>
        </div>
    </div>
    <div class="collapse navbar-collapse navbar-left" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="#">DASHBOARD</a></li>
            <li class="active"><a href="#">DIRECTORY</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">ABOUT</a></li>
        </ul>
    </div>
</div>

When I select the "Directory" page, I expect the toggle button to display "Directory" as its value.

htmlcssbootstrap-4

Answer №1

There is no built-in feature for automating this task. To achieve it, you will have to utilize jquery/javascript. You can refer to this for guidance. Make sure to use the appropriate selector to replace 

<i class="glyphicon glyphicon-menu-hamburger"></i>
with the text of the selected menu option.

Answer №2

Check out this solution on jsfiddle: https://jsfiddle.net/Mahua/8bzbv2es

Here is a simple navigation menu example:

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>                        
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#dashboard" aria-expanded="true">DASHBOARD</a></li>
<li class=""><a data-toggle="tab" href="#directory" aria-expanded="false">DIRECTORY</a></li>
<li class=""><a data-toggle="tab" href="#contact" aria-expanded="false">CONTACT</a></li>
<li class=""><a data-toggle="tab" href="#about" aria-expanded="false">ABOUT</a></li>
</ul>
</div>
</div>
</nav>

<div class="tab-content">
<!--dashboard starts-->
<div class="tab-pane fade in active" id="dashboard">   
<p><b>DASHBOARD</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--dashboard ends-->
<!--directory starts-->
<div class="tab-pane fade" id="directory">   
<p><b>DIRECTORY</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--directory ends-->
<!--contact starts-->
<div class="tab-pane fade" id="contact">   
<p><b>CONTACT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--contact ends-->
<!--about starts-->
<div class="tab-pane fade" id="about">   
<p><b>ABOUT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--about ends-->
</div>

Hope this solution helps you out!

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

Troubleshooting the malfunctioning of the edit record feature in Python Django when using Jquery

Scenario: My HTML table displays data for a specific user with delete and edit buttons next to each row. While the delete button functions correctly, clicking the edit button does not trigger any action despite following a similar approach. This snippet o ...

pythonhtmljquerydjangoajax

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

javascriptjquerycssbootstrap-4windows-7

Cause a JavaScript error to occur if geolocation services are disabled

I have an AngularJS project where I am utilizing the following code snippet to fetch a device's GPS coordinates: // when user clicks on geo button $scope.getGeoLocation = function() { var geocoder = new google.maps.Geocoder(); window.navigato ...

javascriptangularjshtml

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

pythonhtmlselenium

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

javascriptjqueryhtmlemail

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Troubleshooting issues with JavaScript progress bar functionality

I have implemented a progress bar using HTML5, JavaScript and Ajax to showcase file uploads in PHP. The issue I am facing is that the progress bar is not displaying the progress correctly. In addition to that, the echo statements in the PHP code are no ...

javascriptphpajaxhtml

Issue with sender field in contact form and mailer function

Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...

phpjqueryhtmlajaxemail-headers

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly apprecia ...

javascriptjqueryhtmlcssloading

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

htmlcssreactjstypescriptantd

Trying to align two divs side by side with the first one floating left and the second one fixed in position? Unfortunately

Here is an example that I have: https://jsfiddle.net/2z2ksLy4/ HTML: <div class="one"> test </div> <div class="two"> test2 </div> CSS: .one{ width:400px; border:1px solid red; min-height: 200px; float:left; display: ...

htmlcss

HTMLMediaElement does not have the setSinkId method

I am currently in the process of developing a WebRTC application using Angular, with the goal of managing audio output through the setSinkId() method within HTMLMediaElement. However, when attempting to use this method, I am encountering an error message s ...

javascripthtmlwebrtc

Bony Scaffold - halting the motion of specific components

Currently, I am utilizing skeleton to create a fluid layout, which is functioning effectively for the most part. However, I have encountered an issue specifically with the 2 column layout on Magento at this URL: In this setup, the navigation on the left s ...

htmlcssmagentoskeleton-css-boilerplate

The integration of TinyMCE with Bootstrap does not appear correctly within the editor

When using a clean installation of TinyMCE 5 with Bootstrap, the editor does not display the Bootstrap styles while editing. Is there a solution to this issue? Here is the current configuration: var useDarkMode = window.matchMedia('(prefers-color-sch ...

twitter-bootstrapbootstrap-4tinymcetinymce-5

Use CSS3 to conceal the form while displaying the default div

In my project, I am restricted to using only HTML5 and CSS3. Currently, I have a form that requires simulating the action of "sending form data". Upon clicking the submit button, the form should be hidden and a default div (#result) needs to be displayed. ...

htmlcss

I seem to be having trouble getting the home page to display properly in the app, even though I believe my code is correct. I would greatly appreciate any help in identifying the mistake

I have been struggling to render the HomePage using react Router for the past two days. I would greatly appreciate any support you can provide. Despite my numerous attempts, I have been unable to solve this problem. I even tried tools like chatgpt but al ...

javascripthtmlreactjsrenderingrouter

Small jumps occur when implementing the scrollTop jquery animation

I've encountered an issue with the scrollTop jquery animation that I can't seem to resolve. It seems to micro-jump right before the animation, especially when there is heavier content. I'm puzzled as to why this is happening... Here's ...

javascriptjqueryhtmlmousewheelscrolltop

Upgrade button-group to dropdown on small screens using Bootstrap 4

I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet: <li ...

javascriptjquerycssbootstrap-4

What is the best way to adjust the CSS height of an HTML select element to 100% within a table cell in Internet Explorer

Is it possible to make a select (dropdown list) element fill out 100% of the table cell height? I was successful in getting it to work in Firefox and Chrome, but unfortunately not in IE (Internet Explorer). Here is the test HTML code: <table> & ...

htmlcssinternet-explorer

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

javascriptjquerycsswebmedia-queries