Issues with Nav pills (bootstrap 4) not properly setting active states

I am attempting to add a background color to the active state of the Nav Pill. Here is the HTML and CSS code I am using:

.nav-pills > .nav-item > .nav-link:active{
    background: red!important;
    color: white!important;
}

.nav-pills > .nav-item > .nav-link:hover {
    background-color: green!important;
    color:white !important;
    box-shadow: 1px 1px!important;
}
.nav-pills .nav-link {
    color: #46b3e6;
    border: 2px solid #eee;
    margin-left: 10px;
    box-shadow: 2px 2px;
}

Here is the corresponding HTML:

<ul class="nav nav-pills justify-content-center">
    <li class="nav-item">
        <a class="nav-link" href="all_patients.php">All Patients</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
    </li>
</ul>

Could it be because all my links have the same base (all_patients.php)?

cssbootstrap-4nav

Answer №1

you should give this a try instead,

Try without using !important or > (direct child selector)

Simply utilize and alter the order of the hover and active styles.

For example, Apply the hover style first and then add the active style

.nav-pills .nav-item .nav-link:hover {
  background-color: green;
  color: white;
  box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active {
  background: red;
  color: white;
}

View the Live DEMO

.nav-pills .nav-item .nav-link:hover {
  background-color: green;
  color: white;
  box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active {
  background: red;
  color: white;
}
.nav-pills .nav-link {
  color: #46b3e6;
  border: 2px solid #eee;
  margin-left: 10px;
  box-shadow: 2px 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<ul class="nav nav-pills justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php">All Patients</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
  </li>
</ul>

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

Activate an event on a shadow DOM element that is covered by an element in the light DOM (not directly related)

I am currently facing a challenge in retrieving the coordinates of a table cell within a shadow DOM. This table cell may have overlay elements displayed above it, which could span over multiple cells and may not necessarily be direct children of the cell I ...

javascriptcssaddeventlistenershadow-dom

How can I replace the unsightly "Web page not available" error in WebView on Android with a more visually pleasing alternative?

In my WebView Activity, I sometimes encounter issues with loading properly when the WIFI/DATA connection is poor or disconnected. This could potentially be a common occurrence once my app is in use. I'm curious to know how I can replace the unattracti ...

javascriptandroidhtmlcsswebview

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

Using Angular's ng-repeat directive to iterate over a list of <li> elements containing strings with

Query: <li ng-repeat='msg in msgs'>{{msg}}</li> Directive: msgs=['abc','a b v', '123'] msgs.push('Something entered from textarea, possibly containing line breaks') ...

javascriptcssangularjs

Eliminate the dark backdrop from html5 videos that only shows up for a brief moment

Is there a way to remove the brief black background that appears when loading an HTML5 video? I have tried using CSS without success. The HTML: <div id="start-screen"> <video id="video-element"> <source src="video-mp4.mp4" type="vide ...

csshtmlvideohtml5-video

Original text: Default SVG styleRewritten text

Could you please provide information on the default style of SVG? For instance, what is the default font used in a new SVG document? Is this specified in the SVG specifications? <svg><text x="10" y="10">Hello</text></svg> Thank yo ...

csssvgspecifications

Ways to reduce the size of images in Bootstrap 4

Is there a way to adjust the height of the images to make them fit better on the page? Here is an example of what I'm trying to achieve: https://i.sstatic.net/BMlWl.jpg I attempted to use custom CSS to modify the height, but it ended up making the im ...

htmlcssbootstrap-4

Identifying whether a class exists on the same level using a selector

Snippet display: $( document ).ready(function() { //$(".tree-node").parents('.tree-child-folders').css("color", "red"); //$(".tree-collapsed:has(.tree-child-folders)").css("color", "red"); $(".tree-node > .tree-collapsed:has(.tree-child ...

jqueryhtmlcss

How can I create a black border around an input button in the OPERA browser

List item Why does a black box appear around the input button in Opera? Check out the jsfiddle link for reference: http://jsfiddle.net/PKRRj/ Give it a try by clicking on the button. Test it in Opera, as there are no issues with other browsers. Here is ...

phphtmlcssopera

Having trouble adjusting the right-hand edges of form elements when using percentage widths

Simply put, the issue is this: Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%? I often have to adjust the percentages differently dependin ...

htmlcssformsbrowseralignment

The issue of multiple columns not displaying correctly when set to a height of 100

I am struggling with a seemingly simple task. I want to create two columns on my page, each with a width of 50% and a height of 100% so they completely fill the screen side by side. However, no matter what I try, they do not align properly and end up float ...

jqueryhtmlcss

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state

I've been experimenting with different solutions I found in previous questions, but unfortunately, none of them have worked for me. I suspect the issue lies in the fact that the element is deeply nested within CSS classes, and my lack of experience is ...

javascriptcsswordpress

Overflow due to cascading style sheets

THE ANSWER TO THIS QUESTION HAS BEEN PROVIDED In regards to this particular div that contains two unordered lists, I am seeking a solution where these lists can be positioned side by side instead of above or below each other. I have attempted various met ...

htmlcssmenucss-float

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

Identifying overflow of text or elements in JavaScript during execution

The website I'm working on has a unique design that requires users to scroll horizontally using the Arrow Keys instead of swiping. To achieve this, I must constantly check for overflow in text or elements each time a new page is loaded, and if necessa ...

javascriptjquerycsshtmlcss-animations

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Modify the background of the parent component when hovering in ReactJS

Here is my React code snippet that I am working with: Code My goal is to change the background of the App component to the "E-commerce" picture when hovering over it. This should apply to all other pictures as well. Any assistance in solving this issue ...

cssreactjs

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

phpjqueryhtmlcssquerying

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

htmlcssbootstrap-4

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

javascriptjqueryhtmlcss