CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Muhammad Ali
Muhammad Ali

Reputation: 119

How to change active color on bootstrap?

<div class = "navbar navbar-inverse navbar-static-top">
                <div class = "container">
                <a href= "#" class = "navbar-brand">#</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                <div class  = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>




.nav navbar-nav navbar-right .active a {
color: yellow;

Hi guys I want to change my active color to something else I have tried some fixes i found on stack overflow but it does not work. Please can you guys help me?

Upvotes: 0

Views: 4743

Answers (3)

DauntlessRob
DauntlessRob

Reputation: 795

I'm fairly certain this is a syntax issue in your css. This works in the jsfiddle. does it work in your code?

.nav.navbar-nav.navbar-right .active a {


  color: yellow;


}
<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">#</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>
        </li>

Upvotes: 1

user3806642
user3806642

Reputation:

You need to enclosure your CSS in <style> </style> tags and close the opening bracket.

Alternatively, you can create a separate file named "main.css", put your style code in there and link to the file inside the HTML <head> </head> tags with:

<link rel="stylesheet" type="text/css" href="main.css">

Solution 1: Inside the HTML file

<div class = "navbar navbar-inverse navbar-static-top">
                <div class = "container">
                <a href= "#" class = "navbar-brand">#</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                <div class  = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>

<style>
    .nav navbar-nav navbar-right .active a {
        color: yellow; 
    }
</style>

Solution 2: Creating a CSS file

Put this HTML into your .html file:

<head> 
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

Create a file named main.css, ensure it is placed in the same location as your .html file, and put your code into there. It should look something like this: 

    .nav navbar-nav navbar-right .active a {
        color: yellow; 
    }

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

Your selector appears to be incorrect:

.nav navbar-nav navbar-right .active a {
    color: yellow;

This would match an <a> tag that is a child of *.active element that is the child of <navbar-right> that is the child of <navbar-nav> that is a child of *.nav element.

Perhaps you are looking for:

.nav.navbar-nav.navbar-right .active a {

Which would apply to an <a> tag that is the child of an *.active element that is the child of a *.nav.navbar-nav.navbar-right element.

Upvotes: 2

Related Questions