What is the best way to have my hamburger menu button switch colors after being clicked?

Question

What is the best way to have my hamburger menu button switch colors after being clicked?

I am currently working with Bootstrap and I am attempting to change the background color of the hamburger menu button once it has been clicked. While I can successfully modify the color within the browser inspection tool, I am struggling to replicate this in my CSS file. Furthermore, I am unable to make the color change occur only on click, leading me to suspect a specificity issue. The hamburger button itself is taken directly from one of Bootstrap's examples.

Below, you can see that the navbar has been set up to display "Food, LLC" in the top left corner, with all other links initially hidden until the width is reduced to 769px. Once the width reaches this threshold, the hamburger button appears. Clicking on the button reveals the links as drop-down options.

While I have used red as an example background color, any guidance on how to achieve this color change would be greatly appreciated!

In my attempts to address this issue, I have tried to specifically target the `navbar-toggler` class within my CSS without success. These tests have been conducted using Chrome.

Additionally, I experimented with the `:active` CSS property but did not yield the desired result.

html css twitter-bootstrap

Answer 1

Answer №1

If you want to style the

.navbar-toggler[aria-expanded="true"]

selector using only CSS without the need for custom classes, you can do so easily.

By inspecting the page, you'll notice that Bootstrap's JavaScript toggles the aria-expanded attribute between true and false when the button is clicked. This behavior provides a great opportunity to apply specific styles based on this attribute's value.

.navbar-toggler[aria-expanded="true"] {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-collapse-md navbar-dark bg-dark" id="button">
  <a class="navbar-brand" href="index.html">Food, LLC</a>
  <button class="navbar-toggler" id="navbarToggleExternalContent 
active" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse active" id="navbarNav">
    <ul class="navbar-nav" id="color">
      <li class="nav-item">
        <a class="nav-link" href="chicken.html">Chicken</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="beef.html">Beef</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="sushi.html">Sushi</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

If you want to style the

.navbar-toggler[aria-expanded="true"]

selector using only CSS without the need for custom classes, you can do so easily.

By inspecting the page, you'll notice that Bootstrap's JavaScript toggles the aria-expanded attribute between true and false when the button is clicked. This behavior provides a great opportunity to apply specific styles based on this attribute's value.

.navbar-toggler[aria-expanded="true"] {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-collapse-md navbar-dark bg-dark" id="button">
  <a class="navbar-brand" href="index.html">Food, LLC</a>
  <button class="navbar-toggler" id="navbarToggleExternalContent 
active" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse active" id="navbarNav">
    <ul class="navbar-nav" id="color">
      <li class="nav-item">
        <a class="nav-link" href="chicken.html">Chicken</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="beef.html">Beef</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="sushi.html">Sushi</a>
      </li>
    </ul>
  </div>
</nav>

Answer 3

Answer №2

Learn how to use jQuery to toggle the active class upon clicking.

JAVASCRIPT

<script>
$(document).ready(function(){
  $('.navbar-dark .navbar-toggler').click(function(){
    $(this).toggleClass('active');
  });
});
</script>

CSS

<style>
  .navbar-brand>.navbar-toggler.active{
    background-color: red;
  }
</style>

Answer 4

Learn how to use jQuery to toggle the active class upon clicking.

JAVASCRIPT

<script>
$(document).ready(function(){
  $('.navbar-dark .navbar-toggler').click(function(){
    $(this).toggleClass('active');
  });
});
</script>

CSS

<style>
  .navbar-brand>.navbar-toggler.active{
    background-color: red;
  }
</style>

Answer 5

Answer №3

Uncertain whether you intend to modify the icon or the background.

If you wish to alter the icon, this method has worked for me (although the active state may be quickly de-selected):

.navbar-dark .navbar-toggler-icon:active {
    background: red !important; // will change the icon image to a red square
}

To adjust the background:

.navbar-dark .navbar-toggler:active {
    background: red;
}

It would be ideal if a class could toggle on the .navbar-toggler upon clicking. For instance, when the user clicks on it, active will be added. This way, it will stay in the "active" state unless the page refreshes or something removes it again. As mentioned here

You could implement something like

.navbar-dark .navbar-toggler.active { //note the change from : to .
    background: red;
}

Alternatively, as suggested by @IvanS95:

You can target the
.navbar-toggler[aria-expanded="true"]
selector if you simply want to utilize CSS without creating any custom classes

Answer 6

Uncertain whether you intend to modify the icon or the background.

If you wish to alter the icon, this method has worked for me (although the active state may be quickly de-selected):

.navbar-dark .navbar-toggler-icon:active {
    background: red !important; // will change the icon image to a red square
}

To adjust the background:

.navbar-dark .navbar-toggler:active {
    background: red;
}

It would be ideal if a class could toggle on the .navbar-toggler upon clicking. For instance, when the user clicks on it, active will be added. This way, it will stay in the "active" state unless the page refreshes or something removes it again. As mentioned here

You could implement something like

.navbar-dark .navbar-toggler.active { //note the change from : to .
    background: red;
}

Alternatively, as suggested by @IvanS95:

You can target the
.navbar-toggler[aria-expanded="true"]
selector if you simply want to utilize CSS without creating any custom classes

What is the best way to have my hamburger menu button switch colors after being clicked?

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the CSS border to not show up on the webpage?

Remove any HTML tags or formatting from the body of an email using PHP in Laravel

JavaScript code to toggle the navigation bar on mobile devices

Once you address a block using jQuery

Maintain Open State of Toggle Drop Down Menu

Getting Started with ThreeJS code results in a console error message

Alter the appearance of a webpage dynamically based on the size of the browser window using jQuery or JavaScript

Error encountered at line 33 with the unexpected symbol "<". Attempting to showcase database information on the webpage

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

Javascript functions fail to execute as intended

Code written in JavaScript inside an iframe

The appearance of CSS can vary depending on the screen resolutions in which it is

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

What is the procedure for automatically playing the next audio track in HTML5 after the current one finishes playing

Adjust the appearance of a div according to the input value

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

Issue with Cart Items Container's Scroll Behavior on Mobile Devices

Using AJAX in a loop iteration

The controller is referencing $rootScope which has not been properly defined

Submitting data and files simultaneously to Ajax using Laravel