Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be completely honest, I wouldn't mind tweaking the hover effect as well.

https://i.stack.imgur.com/KvlBU.png

This is what my code currently looks like:

<li class="nav-item dropdown">
<NavLink href="#" class="nav-link dropdown-toggle text-nowrap" data-toggle="dropdown">
                                        Admin
                        </NavLink>
                        <div class="dropdown-menu bg-customblue1">
                            <NavLink class="nav-link dropdown-item text-light" href="users">Users</NavLink>
                                        <NavLink class="nav-link dropdown-item text-light" href="roles">Roles</NavLink>
                        </div>
</li>

I've managed to set the background color of the dropdown (dropdown-menu) in line with my new theme (bg-customblue1), and ensured that each item inherits the text-light styling.

However, I'm wondering if there's an elegant way, possibly incorporating SASS, to align the active and hover appearances with this theme?

Thanks!

/Henrik

cssbootstrap-4sasskoala

Answer №1

When using Bootstrap, ensure that the active item is styled with the .active class, as detailed in the documentation here.

To customize this behavior, you can adjust the variables in the Bootstrap variables.scss file such as $dropdown-link-active-color, $dropdown-link-active-bg, $dropdown-link-hover-color, and $dropdown-link-hover-bg. Alternatively, you can create your own SASS code to achieve the desired styling:

.dropdown-menu {

  .dropdown-item:hover {
    color: $light;
    background-color: $customblue-1;
  }
  
  .dropdown-item.active {
    color: $light;
    background-color: $customblue-1;
    
    &:hover {
      background-color: $customblue-2;
    }
  }
}

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 could be causing my CSS parallax effect to not work as expected?

I have been attempting to implement the parallax image technique following the Keith Clark tutorial, but I am facing difficulties in getting it to work correctly. Utilizing the skeleton CSS framework, my goal is to recreate an existing website in order to ...

htmlcss

What are the steps to make a counter-clockwise dial with jQuery Knob?

Is there a way to use multiple instances of jQuery.countdown? Can I create countdown circles using jQuery Knob? Find examples here and here. Using Multiple instances of jQuery.countdown <div data-countdown="2016/01/01"></div> <div data-co ...

javascriptjqueryhtmlcss

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

jqueryhtmlcss

Anchor positioning within Firefox Mobile (for Android)

I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...

htmlcssfirefoxmobilecross-browser

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

I encountered a situation where I needed to dynamically create a grid with square grids of dimensions MxN. Below is the code snippet for achieving this: rerender = (event) => { const height = document.getElementById("y-input").value; const width ...

javascripthtmlcss

Side navigation in Angular is not causing the main content to shrink

In my layout, I have a container that includes two sidenavs and multiple tables in between them. When I toggle the left sidenav, instead of the expected behavior where the content shrinks to accommodate the sidenav, the tables get pushed to the right as if ...

htmlcssangularcss-grid

HTML table with scroll feature displays gaps between consecutive rows

I've created a scrolling table with some header line spacing showing up when scrolled. Do you know how to hide it? Check out this Codepen example Here's the HTML structure: <div class="table-container"> <table class=" ...

htmlcsshtml-tablescroll

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

Managing Margins and Padding in Multiple Lines of Divs in CSS

Trying to understand the spacing issues that arise when tiling a series of divs within a parent div. Here is a link to the fiddle for reference: http://jsfiddle.net/SNSvU/4/. Below is the code snippet: <div id="prioritiesWrapper"> <div class="p ...

cssalignment

The legend color in a JavaFX StackedBarChart does not adhere to the chart color CSS styling

Within my application, using JDK version 1.8u51, I need to assign specific colors to different data categories in a StackedBarChart. To accomplish this, I have created the following CSS: .root{ -fx-ok-color: darkgreen; -fx-critical-color: darkblue ...

csschartsjavafxlegend

Checking if children have certain text using jQuery

My task involves filtering an HTML table. In order to accomplish this, I have created an 'each' callback for all 'tr' elements and check if any of their children contain a specific pattern. $("#filter").keypress(function() { var fi ...

jqueryhtmlcssfilter

Isotope grid shatters when browser window is resized

My goal is to design a 3-column grid using Twitter Bootstrap and Isotope. However, when I resize the browser to force the layout into a single column mode, Isotope fails and leaves large spaces both vertically and horizontally. Regular Layout Issues in ...

csstwitter-bootstrapjquery-isotopejquery-masonry

Changing the screen size of a panel using asp.net and c#

When my screen size reaches 480px, I want to remove one menu and replace it with another. The solution I'm considering is creating two panels. In this setup, I would set menu1 to false when the screen size is less than 480px and menu2 to true. Conve ...

c#cssasp.nettwitter-bootstrappanel

How come my Ajax response is showing up above my navigation menu?

Every time I scroll my mouse, the admin cards end up covering the navbar, which is really annoying. I can't figure out where I went wrong with this issue. Any assistance would be greatly appreciated. Thank you! #mainsec { height: 100vh; width ...

htmljquerycssajaxnavbar

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Centering H1 and dropdown button horizontally using Bootstrap

I positioned a dropdown button next to an H1 tag, but I noticed that they are not perfectly aligned and I want to move the dropdown button up slightly. My project is utilizing Bootstrap 5.1.3 https://i.sstatic.net/muIwB.png <div class="ps-4 pt-4 ...

htmlcsstwitter-bootstrapbootstrap-5

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

javascriptjqueryhtmlcssjqgrid

Creating an image slider that pauses on mouse hover

Here is a code snippet that I'd like to share <body> <div id="slideshow"> <div> <img src="assets/images/home-banner.jpg" width="995" height="421" alt=""/> </div> <div&g ...

jqueryhtmlcss

Issue "Invalid UTF-8" encountered while compiling sass using @import

Here is the structure of my project: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I am using gulp-sass to compile app.scss into ap ...

csssassgulpzurb-foundation