Hi,
codepen - https://codepen.io/nightcoder21/pen/xjvWaj
my question is pretty simple,when i click on my nav bar links they work fine but i want them to underline when active.
e.g i click on ‘contact’ and it takes me to the relevant section but the contact text should be underlined with pink.
I know how to do this with a multi page setup but not with a single pay layout.
any help would be appreciated
Thanks
In codepen->settings->js add jquery and then in js panel add:
$(".nav-item").on("click", function(e){
$("li.nav-item").removeClass("active");
$(this).addClass("active");
});
1 Like
thanks that worked on the code pen link:grinning:…sorry its seems like a silly question but i’m a beginner, how would i implement this on my real site (Im using pure HTML and CSS),im using bootstrap 4…can i just add this in my script section?
thanks
If you are loading jquery also on your real site you can use the code above.
<script>
$('.carousel').carousel({
interval: 2000;
}),
$(".nav-item").on("click", function(e){
$("li.nav-item").removeClass("active");
$(this).addClass("active");
});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
</body>
the above dosen’t work, am i doing something wrong?
thanks
ofc it doesn’t work if you load js libs after your js code.
sorry i have no idea…do i put this in the head tag?
Just move this:
<script>
$('.carousel').carousel({
interval: 2000;
}),
$(".nav-item").on("click", function(e){
$("li.nav-item").removeClass("active");
$(this).addClass("active");
});
</script>
after this:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
1 Like
sorinr:
<script>
$(‘.carousel’).carousel({
interval: 2000;
}),
$(“.nav-item”).on(“click”, function(e){
$(“li.nav-item”).removeClass(“active”);
$(this).addClass(“active”);
});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
</body>
this still dosent seem to work…am i missing something?
thanks
sorinr
May 27, 2018, 5:20am
11
yes. if you move your js code after you load the js libs it will work. please see my above response.
i did try that and it doesnt seem to work…when i click on a navbar link it doesnt high light
sorinr
May 27, 2018, 5:25am
13
Can you share the link to your code?
sure…https://codepen.io/nightcoder21/pen/aGeGJP
if i add it to the JS tab it works just fine…however i’m using plain old html and css and want it to work on my live site,thanks
sorinr
May 27, 2018, 5:39am
15
please just decide. are you going to use:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
or are you planing to do it vanilla javascript?
im a beginer so whatever is simple to implement i guess…i only know html and css at this point,thanks.
just something simple that works i guess