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

The vertical baseline alignment is not functioning as expected

In my setup, I have a straightforward configuration: <button> Lorem </button> <input type="text" value="Ipsum"> both positioned side by side with the help of display: inline-block: button, input{ height: 34px; line-height: ...

htmlcss

Despite following all the correct steps, the tailwind CLI remains unresponsive. Additionally, the default button fails to display any content

view the document and my packages (image) Although it worked with the cdn, I'm puzzled why I can't use it properly with the cli ...

htmlcssnpmtailwind-csstailwind-ui

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canva ...

cssangularjs

Sneak beneath another element with a div's sliding movement

I'm attempting to make an absolutely positioned div element (#slideout) slide underneath another div element .menu using CSS, if possible. Check out my code here. Currently, when the red tab is clicked, #slideout covers .menu, but I want it to hide ...

jquerycssresponsive-design

Guide for creating a scroll-triggered rotation animation using only JavaScript

Looking to achieve a cool scroll effect with an image that rotates on the X-axis by a specific degree, such as 70deg. The goal is to have the image's rotateX value change to 0deg when it enters the viewport upon scrolling and revert back to 70deg whe ...

javascripthtmlcss

The footer is not expanding to fill the entire width of the page

My footer is giving me trouble by not stretching to the full width on one specific page out of eight. This issue arose after I added an administration menu. Any assistance would be greatly appreciated. HTML: <div id="administraceMenu"> <ul clas ...

htmlcss

The animation of a disappearing div with CSS is not stopping when hovering over it

Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality. I have looke ...

javascripthtmlcssreactjs

Firefox showing inconsistent jQuery positioning results

Here is a fiddle I created to demonstrate the issue at hand... https://jsfiddle.net/scottieslg/q78afsu8/10/ Running this fiddle in Chrome or Opera yields a value of 8. However, Firefox returns 9, and IE gives 8.5. How can I ensure consistency across al ...

jquerycssfirefox

What is the method for adding the square root symbol to a button's value?

I am attempting to display the square root symbol inside a button, but I am having trouble making it work. Below is my button code: <input type="button" id="sqrt" value="sqrt" onclick="insert function here"> For the value, I want the square root sy ...

csshtmlbuttonsqrt

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

Difficulty with collapsing icon in Bootstrap's navigation bar

I am in the process of building a bootstrap website and facing an issue with the collapsible navigation bar. The nav toggle button is always visible, but I want it to only appear when the nav bar goes to a medium size. How can I achieve this? The code sni ...

htmlcsstwitter-bootstrapbootstrap-4

A step-by-step guide on customizing the background color of the selected date in the MUI DatePicker

I am looking to customize the background color of selected dates in a MUI datePicker. In the image below, you can see that I want to change the blue color to a different color. Here is my code: const customStyles = makeStyles(theme => ({ datePickerC ...

htmlcssreactjsmaterial-ui

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

javascripthtmlmysqlcss

I am having trouble properly positioning an icon next to its corresponding text within a menu item

I'm a newcomer to the world of HTML5 + CSS3 and I'm having trouble with aligning menus, text, and icons within the menu. Here's the issue: Each line of the menu consists of an icon and a text description. The problem is that they are too clo ...

htmlcssweb

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

javascripthtmlcssangulartypescript

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss

"Customizing a footer to resemble a bootstrap nav-bar: A step-by-step guide

My situation involves the need to have a footer that functions similarly to a navbar. I want to be able to hide the list items of a ul list by clicking on a custom button, similar to the functionality of the bootstrap hamburger menu. Is it possible to use ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-transitions

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

htmlcssangular

Ways to designate a tab as active

Having trouble styling the active tab in my tabbed menu created with Bootstrap. The active class seems to only affect the first tab. How can I make it work for all tabs? Check out this screenshot for reference. Below is the code snippet: <script ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to apply an error class to an input field and customize the style using SCSS?

This is the CSS code I am using: input[type="text"] { .has-error { color: red; border: 1px solid red; } } input[type="text"], textarea { width: 100%; padding: 10px; margin-botto ...

reactjssass