Personalized Styling: Transform the Color of the Active Navigation Pill

I am working with Pill tabs that are assigned the color #d7e5ea. The goal is to change the color of the active pill tab to #83a8b5 while keeping the inactive ones at #d7e5ea.

Is there a specific custom CSS code that can be used to achieve this color change? I have previously attempted altering the background color without success.

@media all{
a{background-color:transparent;}
a:active,a:hover{outline-width:0;}
*,*:before,*:after{box-sizing:border-box;}
a{-ms-touch-action:manipulation;touch-action:manipulation;}
.nav{margin:0;padding:0;}
.nav{width:100%;position:relative;display:inline-block;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;}
.nav>li{display:inline-block;list-style:none;margin:0;padding:0;position:relative;margin:0 7px;transition:background-color .3s;}
.nav>li>a{padding:10px 0;display:inline-block;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;}
.nav-center{-ms-flex-pack:center;justify-content:center;}
... (additional code snippet follows)

<ul class="nav nav-pills nav-uppercase nav-size-normal nav-center"><li class="tab active has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li></ul>

csswordpressnavnav-pills

Answer №1

It seems that there is a crucial !important rule overriding the changes you made.

To override it, you'll need to include the !important in your rule as well, like this:

.nav-pills>li.active>a {
    background-color: #83a8b5;
}

Alternatively, you can remove the important rule from here:

.nav-pills>li>a{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#d7e5ea;color:#ffffff!important;text-decoration:none!important;}


@media all{
a{background-color:transparent;}
a:active,a:hover{outline-width:0;}
*,*:before,*:after{box-sizing:border-box;}
a{-ms-touch-action:manipulation;touch-action:manipulation;}
.nav{margin:0;padding:0;}
.nav{width:100%;position:relative;display:inline-block;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;}
.nav>li{display:inline-block;list-style:none;margin:0;padding:0;position:relative;margin:0 7px;transition:background-color .3s;}
.nav>li>a{padding:10px 0;display:inline-block;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;}
.nav-center{-ms-flex-pack:center;justify-content:center;}
.nav>li>a{color:rgba(102,102,102,.85);transition:all .2s;}
.nav>li>a:hover,.nav>li.active>a{color:rgba(17,17,17,.85);}
.nav li:first-child{margin-left:0!important;}
.nav li:last-child{margin-right:0!important;}
.nav-uppercase>li>a{letter-spacing:.02em;text-transform:uppercase;font-weight:bolder;}
.nav-pills>li.active>a{opacity:1;color:#fff;background-color:#446084;}
.tabbed-content .nav{width:100%;}
.nav-pills>li{margin:0;}
.nav-pills>li>a{padding:0 .75em;border-radius:99px;line-height:2.5em;}
a{color:#334862;text-decoration:none;}
a:focus{outline:none;}
a:hover{color:#000;}
ul{list-style:disc;}
ul{margin-top:0;padding:0;}
li{margin-bottom:.6em;}
ul{margin-bottom:1.3em;}
.nav>li>a{font-size:.8em;}
.nav-pills>li.active>a{background-color:#83a8b5;}
.nav>li>a{font-family:"Open Sans",sans-serif;}
.nav>li>a{font-weight:700;}
.nav>li>a{text-transform:none;}
a{color:#83a8b5;}
a:hover{color:#5e96aa;}
}

a{background-color:transparent;}
a:active,a:hover{outline:0;}
*,::after,::before{box-sizing:border-box;}
a{background-color:transparent;text-decoration:none;}
a,a:visited{color:#554e8e;}
a:hover{text-decoration:underline;}
a:active,a:hover{outline:0;}
ul{margin:0 0 12px;padding:0 0 0 18px;}
li{margin-bottom:6px;}

@media all{
.nav-pills>li{font-size:18px!important;}
a:hover{color:#282828;}
a,a:visited{color:#7d7d7d;}
.nav-pills>li.active>a{font-size:14px!important;}
.nav>li>a{font-size:14px!important;font-weight:400;color:#666;}
li{list-style-type:none!important;}
.nav-pills>li>a{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#d7e5ea;color:#ffffff!important;text-decoration:none!important;}
.nav-pills>li>a:active{padding:0 .75em!important;margin:3px!important;border-radius:99px!important;line-height:2.5em!important;background-color:#83a8b5!important;color:#ffffff!important;text-decoration:none!important;}
}
<ul class="nav nav-pills nav-uppercase nav-size-normal nav-center"><li class="tab active has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></a></li><li class="tab has-icon"><a href="#tab_tab-1-title"><span>Tab 1 Title</span></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

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

What method is being used by this website to carry out this specific task?

I recently came across this website, , and I was intrigued by the functionality of the matrix entry feature. By clicking on the bracket icon next to the H2O icon, you can access it. Upon accessing the matrix entry function, users are prompted to input th ...

htmlcss

Non-responsive sidebar

I am currently facing two issues with my sidebar. The top part gets cut off on mobile devices. The sidebar is expanded by default on mobile devices, which is not the desired behavior. Also, when it is collapsed, the content of the page does not shift to t ...

htmlcssbootstrap-5

Ways to retrieve all elements following a chosen element

Is there a way to include the last element too? $('div.current').nextUntil("div:last").css("color", "blue"); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div>First</div> < ...

javascriptjqueryhtmlcss

"Enhancing the appearance of sorted divs using CSS3 animations in jQuery

Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions. Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the r ...

jquerycss

Phantom writing reminiscent of the ghostly prose found on a Tumblr registration

Is there a way to create a URL field similar to the one on ? It's the field where the text is faded and when you click on it to type, it automatically appends ".tumblr.com" that cannot be erased or highlighted. The JavaScript used for this feature is ...

javascriptjquerycss

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

phpjavascriptjqueryajaxwordpress

Adjust the height of a division dynamically

I have the following HTML snippet: <div id="container"> <div id="feedbackBox"></div> </div> The #feedbackBox div is initially not visible. To center the div, the CSS code is used: #container { position: absolute; widt ...

jqueryhtmlcssresize

The drag functionality can only be used once when applied to two separate div elements

Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...

javascriptjqueryhtmlcss

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

Guide on creating a darkening effect for lights

Seeking assistance on how to create a light-off effect when clicking on any of my textboxes. I discovered this concept on the following website: What I aim to achieve is that upon clicking a specific textbox, it will be highlighted. Upon clicking the sam ...

javascriptjqueryhtmlcssjson

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

Implementing a Custom CSS Theme in JavaFX

Hey everyone, I stumbled upon this amazing JavaFX theme called Flatter on . I've been attempting to implement it for a couple of hours now, but I'm struggling with the process. Can someone provide me with a detailed guide on how to activate thi ...

cssnetbeansjavafx

Customize the background in a blogger template without using the body.background property

I am using a custom Galauness template on my blogger site (http://nethoroskop.blogspot.com), but I want to add my own image as the background. Can anyone guide me on how to do this? The HTML code does not include any reference to body.background. body{ ba ...

htmlcsstemplatesbackgroundblogger

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

htmlcss

Processing Wordpress forms using Ajax and PHP

Currently, there is a form on my website that sends data to a PHP file. When the form is submitted, users are taken to a blank PHP file. I would like the form to either submit via AJAX or redirect after processing the mail function. Thank you for any help! ...

phpajaxwordpressjquery

The distance separating the top navigation bar from the sub-navigation menu

I have designed a navigation menu with a subnavigation section, view it on JSFiddle with subnavigation. My challenge is to create a 1px solid white separation between the top navigation (with yellow background) and the subnavigation (with red-colored backg ...

htmlcssnavigationbar

Enhancing a website design for touchscreen devices to address issues like unintentional mouse dragging

Currently, I am in the process of creating a compact web-based kiosk interface specifically designed for a 7-inch touchscreen. The details of the system itself are not pertinent at this time; however, it is worth noting that the browser running on the touc ...

javascripthtmlcsstouchscreenvisual-artifacts

Tips for maintaining alignment of components within an Angular Material tab:

I am facing an issue with keeping items aligned properly. Initially, I had a form with two Angular Material lists placed side by side, each occupying 6 units and it looked good. However, when I tried to enclose these two lists within a material tab, they e ...

cssangularangular-material