Hallo ik ben bezig met het omzetten van een psd template naar bootstrap 3 nu zit ik echt met een probleem waar ik niet uit kom.



Het gaat om het volgende ik heb een menu gemaakt echt er als ik op een menuknop klik en ik sleep mijn muis weg dan veranderd de knop in de kleur grijs/wit.
(zie screenshot)
En ga ik er dan vervolgens weer op staan dan wordt het weer zwart nu weet ik dat dat te maken heeft met Hover maar nu is mijn vraag hoe pas ik dat aan zodat wanneer ik er op klik en mijn muis weg sleep het zwart blijft kwa kleur.
Heb al op google lopen zoeken maar ik kom er echt niet uit vandaar dat ik het nog is vraag.


Hieronder de code die ik tot nu toe heb gebruikt.

Code:

<header class="navbar">
      <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" data-target="#menu" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" title="Home">Home</a></li>
                <li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" href="#" role="button" title="Verzameling">Verzameling <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#" title="Replica shirts"><i class="fa fa-caret-right"></i> Replica shirts</a></li>
                        <li><a href="#" title="Matchworn shirts"><i class="fa fa-caret-right"></i> Matchworn shirts</a></li>
                        <li><a href="#" title="Diverse shirts"><i class="fa fa-caret-right"></i> Diverse shirts</a></li>
                    </ul>
                </li>
                <li><a href="#" title="Gezocht">Gezocht</a></li>
                <li><a href="#" title="Statistieken">Statistieken</a></li>
                <li><a href="#" title="Links">Links</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Code:

 .navbar{padding-top:30px; }
.navbar-collapse{background: #222222;}
.navbar-toggle{#db0000; border: none; }
.navbar li {background: url(../images/border.png) no-repeat; height:40px;}
.navbar li:first-child { background: none; }
.navbar li a {color:#ffffff; font-size: 17px; font-family: OpenSans SemiBold;  padding: 10px 15px }
.navbar li a:hover{background: #2d2d2d;}

Je hebt een hover state voor als de cursor er boven hangt maar niets doet. Je hebt ook een active state voor als je de muis ingedrukt houdt. En je hebt een visited state voor als een link eerder bezocht is.

Veranderd dit

Code:

.navbar li a:hover{background: #2d2d2d;}

eens naar

Code:

.navbar li a:hover, .navbar li a:hover:active{background: #2d2d2d;}

als eerst bedankt voor je reactie. Heb je code geprobeerd maar het effect blijft nog steeds het zelfde. Nog steeds die grijzige kleur en niet

Dit is mijn css nu

Code:

.navbar{padding-top:30px;  }.navbar-collapse{background: #222222;}
.navbar-toggle{background: #db0000; border: none; }
.navbar li {background: url(../images/border.png) no-repeat; height:40px;}
.navbar li:first-child { background: none; }
.navbar li a {color:#ffffff; font-size: 17px; font-family: OpenSans SemiBold;  padding: 10px 15px }
.navbar li a:hover, .navbar li a:hover:active{background: #2d2d2d;}
.icon-bar{background: #ffffff;}

Sorry, het was laat. :hover:active moet alleen :active zijn.

Weer bedankt voor je reactie heb nu dit als code maar het effect blijft het zelfde

Code:

.navbar li a:hover, .navbar li a:active{background: #2d2d2d;}

Heb de onderstaande code ook al geprobeerd maar geen succes helaas

Code:

.navbar li.active, .navbar li a:hover{background: #2d2d2d;}

Ben inmiddels verder gegaan met mijn dropdown menu maar ook daar wil het niet echt mee lukken als ik het beeld smal maak staat de tekst door elkaar zie screenshot.



dit is mijn css code inclusief dropdown.

Code:

.navbar{padding-top:30px; }
.navbar-header{background:#222222;}
.navbar-collapse{background: #222222;}
.navbar-toggle{ border:none; }
.navbar li {background: url(../images/border.png) no-repeat; height:40px;}
.navbar li:first-child { background: none; }
.navbar li a {color:#ffffff; font-size: 17px; font-family: OpenSans SemiBold;  padding: 10px 15px }
.navbar li a:hover, .navbar li a:active{background: #2d2d2d;}
.icon-bar{background: #ffffff;}

/* Dropdown */
.dropdown-menu
{
    background: #db0000;
}
.dropdown-menu li a:focus,
.dropdown-menu li a:hover
{
    background: #db0000;
}


.nav li.open a,
.nav li.open a:focus,
.nav li.open a:hover
{
    background: #db0000;
}

Dit zijn inderdaad de styling dingen waardoor je je even behoorlijk kan irriteren aan Bootstrap er is nogal wat aan diverse classes verbonden.
Het geen wat ik aan kan raden om nog sneller te kunnen stylen en direct resultaat te zien is door middel van Google chrome en de dev tools, wanneer je de elementen daar inspecteert kun je exact zien welke class wat doet. Ook hou je je dan netjes aan de css notaties zoals bootstrap dat ook doet en is de kans op bugjes kleiner.

Succes!

Wat je nu doet liep ik in het begin ook vaak tegenaan. Inmiddels niet meer en zal je vertellen waarom.

Ik gebruik de configurator van bootstrap en daarmee kan ik een package generen die standaard je menu goed kan stylen zonder de standaard vlakjes e.d. Je kunt dan bijvoorbeeld een active background color kiezen die standaard via bootstrap goed staat. Ook alle font kleuren e.d.

Kijk maar eens op http://getbootstrap.com/customize/

Nadat je op bovenstaande pagina bent aangekomen scroll je naar beneden of je klikt rechts op "Less variables" > "Navbar". Je scrollt dan naar de standaard css instellingen van je navigatie balk. Stel deze goed in en zodra je klaar bent scroll je helemaal naar beneden waarna je op "Compile and download" klikt. Je download nu een package van bootstrap met daarin de door jouw opgegeven kleuren zonder toevoeging van enige custom css. 100% bootstrap proof.

Edit: in de package zit ook een .json file. Bewaar deze file want die bevat je instellingen en kun je uploaden op eerder genoemde pagina van Bootstrap zodat je je custom style direct kunt inladen en verder kunt bewerken.

dus als ik het goed begrijp moet ik gewoon dit invullen met de kleur en maten van mijn menu zoals die in de psd file is en dan opslaan.
Vervolgens dat json bestand bewaren want dan kan ik weer verder om bijvoorbeeld een slider aan te passen ofzo.

iedergeval bedankt voor je tips

vond ook deze site ook wel handig is eigenlijk het zelfde principe alleen zie je gelijk het resulaat.

http://bootstrap-live-customizer.com/