Tips for Customizing the Active Class in Bootstrap 3

After spending the last 3 days searching online and trying various examples, I still can't figure out how to style the active class properly.

Below is the HTML code snippet:

  <div class="navbar navbar-inverse navbar-fixed-top" id="mainHeader"    role="navigation">
    <div class="container">


        <button class="navbar-toggle" data-target=".navbar-responsive-collapse"
                data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button> 
        <div class="nav-collapse collapse navbar-responsive-collapse nav-hover-orange">
            <ul class="nav navbar-nav pull-right">

                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="houseoldRemovals.html">Houseold Removals</a></li>
                <li><a href="officeRemovals.html">Office Removals</a></li>
                <li><a href="storage.html">Storage</a></li>
                <li><a href="tipsAndAdvice.html">Tips & Advice</a></li>
                <li><a href="termsAndConditions.html">Terms and conditions</a></li>
            </ul> 
        </div> 
    </div> 
</div>
<!-- NAV END -->
htmlcsstwitter-bootstrap

Answer №1

You have the capability to accomplish this task.

.menu .navigation > item > link:focus,
.menu .navigation > item > link:hover,
.menu .navigation > item.current > link {
  background-color: #11bb11;
}

See it in action: http://example.com/E4bH8G3NPT

Answer №2

To apply the following styles, simply include this in your stylesheet:

.navbar-inverse .navbar-nav .active a   {
    background-color: #FFF;
    color: #333;
    --etc--    
}

Answer №3

Your coding does not adhere to the bootstrap standard guidelines.

Make sure to update the nav-collapse class to navbar-collapse.

Here is a snippet of CSS code that you can use. Simply change the background color to orange:

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus {
     background: orange;
}

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

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

imagecssresponsive-designsass

Need help with JQuery mouseOver fading in twice when you only want it to fade in

The version can be displayed here. I'm looking to have the current text fade away and the new text fade in. Strangely, it seems to fade in twice for some reason. $(window).load(function(){ var originalTitle = $('.Pinctitle').text(); $(&apo ...

jqueryhtmlcss

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Our asp.net LOB web application is quite large. The issue we are facing is the delay of up to 10 seconds when the app pool is started or recycled, making the first page load slow. This results in users seeing a white page with a loading spinner until IIS ...

htmlasp.netasp.net-mvciisiis-7

Interactive hover text appears when you mouse over the SVG path

Does anyone know the simplest way to display sample text when hovering over an svg path? Below is my CSS code: <style> path:hover{ fill:yellow;stroke:blue; } .available { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;strok ...

javascriptjquerycsssvg

Adjust the size of a canvas using JavaFX in an FXML file

I am encountering an issue with resizing a canvas in Javafx while using scene builder and fxml. Currently, when the user clicks on the canvas, it turns black, but upon resizing the screen and clicking on the canvas again, only the original size of the canv ...

javahtmlcanvasjavafxjavafx-8

The functionality of the Bootstrap carousel may be compromised when initialized through JavaScript

Why isn't the Bootstrap carousel working in the example below? It starts working when I paste it into .content <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script sr ...

javascriptjquerytwitter-bootstrap

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...

htmlangularjs

AngularJS - Bootstrap Datepicker with custom format 'mm-yyyy' still permits users to input date in 'mm-yy' format

After incorporating the bootstrap datepicker into an angular directive and applying it to a textbox, everything appears to be functioning correctly except for the validation aspect. Although I have configured it to only accept dates in 'mm-yyyy' ...

jqueryangularjstwitter-bootstrapdatepicker

Mysterious gap found between image and table

Hey there! I've been struggling with an unusual gap between a top image and a table on my website (www.tradecaptaincoaching.com). The table was created using . Despite spending hours on it, I can't seem to get rid of the huge 200 pixel gap that& ...

htmlcss

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

htmlcssforms

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

Extracting the content within an HTML element through parsing

I am looking to extract the content inside these two elements and store it in a string: source_code = """<span class="UserName"><a href="#">Martin Elias</a></span>""" >>> text 'Martin Elias' Could someone guide ...

pythonhtmlpython-2.xhtml-parser

Can I be detected for using text expanders or copying and pasting text into a form before submitting it?

As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...

htmlsecurityuser-interface

How to activate an event using a Bootstrap switch in VueJS 2

Dealing with a bootstrap switch has been quite interesting. In JQuery, managing it is simple, just follow the documentation: $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) { console.log( ...

javascriptjquerytwitter-bootstrapvue.js

Error encountered when attempting to trigger a Bootstrap dropdown within a designated div

When using React JS, I encountered an issue when trying to trigger a dropdown that was nested inside a div with the class name "row". Initially, I placed the data-toggle and data-target attributes inside the div, like so: <div className="row"> < ...

javascripthtmlcssreactjsbootstrap-4

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

htmlangulartypescriptdatatablesangular-ui-bootstrap

Refine your search by name following the implementation of a character-altering filter

Encountered a scenario in which there is a need to filter elements generated by the 'ng-repeat' directive. I have implemented a custom filter that replaces one character with another and vice versa for each element created. However, when attempt ...

javascripthtmlangularjs

The input values are displayed in a continuous line without any breaks between them

I'm currently learning ReactJS and I have created a simple example to practice. The goal is to display each input value (separated by whitespace) in an HTML element (<h1>). However, instead of showing each output value individually, they disappe ...

htmlreactjs