• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

De achtergrond van een actieve link van een Bootstrap navbar volledig wit maken

Status
Niet open voor verdere reacties.

Island

Gevestigd lid
Lid geworden
1 mrt 2016
Berichten
264
Waarderingsscore
0
Hoi,

Voor de website die ik aan het bouwen ben moet de achtergrond van een actieve link wit blijven. Ik heb geprobeerd op de website van Bootstrap dat voor elkaar te krijgen maar ik kon niet vinden waar ik dit kleine balkje weg kon halen(zie bijlage). Ik heb in css dit geprobeerd:
.nav li.active > a {
border-bottom: solid 3px #F15B26;
}
.nav li.active {
background: #ffffff;
box-shadow: #ffffff;
}

En dit is mijn js code:
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
$("#myNavbar").find("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
$(".navbar").on("activate.bs.scrollspy", function(){
var x = $(".nav li.active > a").text();
});
});


En dit is de navbar:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="yp_digital-logo.png" alt="logo"/></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#casus">Casus</a></li>
<li><a href="#techniek">Techniek</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>


ncf navbar.png
 
Welk klein balkje wil je weghalen? Dat oranje? Dat is die 3px border.
 
Nee er zit aan de linker, boven en rechter kant een heel licht grijs balkje. Hij is niet heel duidelijk maar als je goed inzoomt moet hij wat duidelijker worden.
 
Wellicht dat je de box-shadow bedoeld? Zal een andere css class zijn die je moet editen.

Is de website public? Wil wel eens een kijkje nemen. Ik hoop dat mijn Google Chrome "inspecteren" werkt.. Zo irritant als het niet werkt en je daar aan gewend aan bent :D
 
Nee, dit wordt de eerste versie. Ik zou je hem kunnen mailen als je je mail via een PM stuurt.

Alvast bedankt.
 
Je kan het uploaden en als ik hem binnen heb verwijder het dan.
 
Excuses voor de late reactie,

Na een overleg met mijn werkgever mag ik helaas niet de code sturen. Ik heb priv iemand gevonden die mij kan helpen ik zou de oplossing sturen zodra ik die heb gekregen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan