0

I'm a beginner with HTML/CSS and I have a problem with my HTML and CSS script. I'm trying to change the background color from active navbar tab when it displays my dropdown-menu (you can see the picture juste after my script) but none effect for the moment. Probably because I am not writting well the CSS part (last lines from my css file).

This is my HTML code :

   <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="http://www.data.fr/">DataEC</a>
            </div>

            <!-- Home tab -->

            <ul class="nav navbar-nav">
                <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Accueil</a></li>

            <!-- Individual form tab -->

                <li class = "dropdown">
                    <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                        <span class="glyphicon glyphicon-baby-formula"></span> Fiches individuelles
                    <b class = "caret"></b>
                    </a>
                    <ul class = "dropdown-menu">
                        <li><a href = "{% url "home" %}">Accueil des fiches individuelles</a></li>
                        <li><a href = "{% url "form" %}">Création des fiches individuelles</a></li>
                        <li><a href = "{% url "searched" %}">Consultation des fiches individuelles</a></li>
                        <li><a href = "{% url "deleted" %}">Edition des fiches individuelles</a></li>
                    </ul>
                </li>

And I want to modify the black background color from this tab :

enter image description here

This is my CSS file :

/* Define background color from upper navbar */
.navbar-inverse{
    background-color: #0083A2;
}

/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
    color : white;
}

/* Tab properties from navbar */
.navbar .nav > li > a {
    color:  white;
}

.navbar .nav > li > a:hover{
    color:  #454545;
}

.active {
    background-color: #454545;
}

h1, h2, h4 {
    color: #0083A2;
}


/* Define button properties */
.button {

    display: inline;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    font-size: 16px;
    background-color: #e7e7e7;

    -webkit-transition-duration: 0.2s ;
    transition-duration: 0.2s ;
}

/* Define form fields properties */
.form-fields {
    border-radius: 8px;
    margin-right: auto;
}

.col-sm-6 {
    display:inline-block;
    margin-left : 10px;
    width: 30%;
    list-style: None;
}

.col-sm-8 {
    list-style: initial;
}

.col-sm-10 {
    display:inline-block;
    margin-left : 10px;
    width: 800%;
    list-style: None;
}

/* Hoover button properties */
.button:hover {
    background-color: #0083A2;
    color: #454545;
}

/* Hoover color dropdown menu */
.dropdown-menu>li>a:hover {
   color: #FFFFFF;
   text-decoration: none;
   background-color: #0083A2;
}
/* I'm not sure for this part ! */
.navbar-inverse .container-fluid .navbar-header .dropdown open > .active {
    background-color: white;
}

Could you help me ?

Thanks !

EDIT :

Another picture with Firebug could help you :

enter image description here

Essex
  • 6,042
  • 11
  • 67
  • 139
  • Possible duplicate of [Change navbar color in Twitter Bootstrap 3](http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) – vanburen Dec 30 '16 at 00:06

1 Answers1

0

In the last CSS rule, try changing .dropdown open to .dropdown.open.

Tha'er AlAjlouni ثائر العجلوني
  • 14,069
  • 7
  • 33
  • 38