What steps should I take to modify the color of the active navigation tab?

I am attempting to modify the color of a tab when it is active. Currently, I am using Bootstrap 4.1.3.

My goal is to have the active tab appear orange when clicked, while the inactive one remains white as it is now. How can I achieve this using CSS? I have searched through several questions on Stackoverflow but none of them have provided a solution that works for me.

The code in question is as follows: HTML:

<div class="container" align="center">
<nav>
    <div class="nav nav-tabs nav-fill nav-test" role="tablist">
        <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>
        <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a>
    </div>
</nav>

CSS

.nav-diables {
    color: Black;
    background-color: White;
    text-decoration:none;
    font-weight: bold;
}
.nav-diables > li.active {
    color: White;
    background-color: #FF7400 !important;
    text-decoration:none;
    font-weight: bold;
}

Thank you for any assistance you can provide.

Sincerely, Miquel

htmlcssbootstrap-4

Answer №1

Your issue can be resolved with this code snippet.

.nav-item {
    color: black;
    background-color: white;
    text-decoration:none;
    font-weight: bold;
}
a.nav-item.nav-link.active {
    color: white;
    background-color: #f90;
    text-decoration:none;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container" align="center">
<nav class="nav nav-pills nav-justified" role="tablist">
        <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>
        <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a>
</nav>
    </div>
</body>
</html>

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

Tips for creating a responsive width for a column of Bootstrap 4 buttons

I am attempting to design a vertical column of buttons that adjust responsively. Despite my efforts, the buttons do not resize properly when the screen size changes. I have explored resources on how to address this issue in Bootstrap and tried adjusting th ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

What is the best way to implement data loading on scroll in HTML with AngularJS?

I'm working with a HTML Dynamic Table <div class="clearfix reportWrapper" > <div class="reportTable"> <table class="table table-bordered footerBGColor"> <thead fix-head class="headerTable"> ...

javascripthtmlangularjs

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

htmlimagesrc

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

htmlcssanimationanimate.css

Passing data from a textbox on a PHP page to a textbox on an ASP.NET website

I'm working on a PHP website that includes a login form. When students enter their username and password, I want them to be redirected to an ASP.NET website (not mine) that also requires a login. I want the username and password they entered on my PHP ...

c#phphtmlasp.net

Using the / (forward slash) in CSS styling statements

Similar Query: Understanding the CSS font shorthand syntax As I was examining the styling on Apple's website, I encountered a CSS rule that left me puzzled: body { font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana, ...

css

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Resizing images next to lengthy text on mobile screens

My text and image keep behaving oddly when viewed in a smaller window or on mobile. The image resizes unpredictably based on the length of the text, as shown in my preview. I attempted to use flex wrap to contain the longer text, but it only pushed the ima ...

cssimageflexbox

Achieve the effect of bringing the div and its contents to the top when hovered over, all while keeping

I have designed a popup that includes multiple boxes. I want the width of the box to expand and be visible over all content on the webpage when a user hovers over any ".deviceboxes". I tried using ".deviceboxes:hover" which worked fine for the first box in ...

jqueryhtmlcss

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss

Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling. Any suggesti ...

htmlcss

A versatile CSS solution for fixed background images that stretch to fit any screen height across multiple browsers

Similar Question: Stretch and Scale CSS Background I am interested in finding a method to create a background with specific criteria: - remain fixed in place - adjust proportionally based on the window's height - work across all browser types or ...

cssbackgroundheightfixedstretched

Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Some users are experiencing issues with the vertical-align: middle property not working on a span. .tc__timezone-toggle { display: flex; } .tc__timezone-toggle span { vertical-align: middle; } .tc__timezone-toggle-ui { display: block; font-wei ...

htmlcssflexbox

Sharing information between Angular controllers utilizing services

I am struggling with transferring data between controllers using a service. I expect that when the "send data" button is clicked, the information entered into the text field should appear in the Results controller. However, nothing seems to be showing up. ...

cssangularjsionic-framework

Display various components from `ViewContainerRef.createComponent()` in distinct `<div>` elements to ensure a proper grid layout using Bootstrap

I am looking to dynamically add child components to a parent component while ensuring that they are displayed within the Bootstrap grid system. Following the guidelines in the Angular documentation (https://angular.io/guide/dynamic-component-loader), I ha ...

angularbootstrap-4

I am currently exploring options on how to eliminate the excess space at the top of the screen when viewing on smaller devices like mobile phones and tablets

Utilizing bootstrap for my layout, I have a row with 4 columns where the content within each div has varied top margins. This creates a cascading effect and looks great on desktop screens. However, the issue arises when viewing it on smaller screens as the ...

htmlcssbootstrap-4

Verification symbols in Unicode

I'm on the hunt for a universal checkmark symbol that is compatible across various operating systems and web browsers. I've tested out the following two options: Version 1: ✓ Version 2: ✔ (source) However, these symbols seem to be working ...

htmlunicodeasciihtml-entities

Is there a way to create a fallback for SVG in a CSS pseudoe

As I work on my website, I am incorporating some decorative elements using SVG images, but I am aware that certain browsers may not support them properly. That's why I want to ensure I have a PNG fallback in place. I am utilizing the :after pseudo-el ...

csssvg