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>
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>