Bootstrap Nav bar issues

1

Hi there - working on a personal portfolio page now and facing a couple of issues using Bootstrap’s nav bar.
This is the link to my code so far.

  • Using Dataspy + scroll, but active links are not showing up when on that section
  • I added div { padding-top:40px; margin-top:-40px; } under CSS. Otherwise it doesn’t jump to the accurate header when I click on the section links - it lands somewhere in between the section randomly.
  • However, I think adding that snippet of code is causing the bg-color of the #work section to overspill into the #hello section. You can see the unwanted grey background there :frowning:
  • Lastly, using a ul class of navbar nav turns the menu into a vertical one. What am I doing wrong?

Been stuck on this for a while now, so I appreciate any guidance. Thanks in advance!

2

active links are not showing up

you need bootstrap.js and also jquery as its dependency

I think adding that snippet of code is causing the bg-color of the #work section to overspill into the #hello section

it’s because you’re pulling every section up with margin-top:-40px which overlaps other section. a quick fix would be to add those paddings outside just before the section

ul class of navbar nav turns the menu into a vertical one

i didn’t look into this but i’m guessing it’s a conflict between bootstrap versions since you included both v3.3 and v4.0. Don’t do that @lazystreak

pen: https://codepen.io/pseudop/pen/BJPoma

1 Like
3

Thank you @pseudop! Completely forgot i’ve enabled bootstrap 3 and 4 at the start.
I’ve switched to bootstrap 4 and worked for it a couple more hours. if you don’t mind, i had a couple of follow up questions:

  • do you know how i can align the links in my navbar to the right? .justify-content-center doesn’t work. neither does navbar-right
  • how can i re-create the segments you’ve done? after applying background colour to the sections, they all seem to be joined together - i would prefer for them to be in blocks. i thought this would be something to do with <div class="container">, but haven’t successfully found out.
  • i manually aligned the navbar-brand using padding. this isn’t a responsive solution unfortunately, but i’m not sure how you aligned it with the content either.
  • i’ve added bootstrap.js and jquery as its dependency, but active links are still not showing up :thinking:

link to my pen for easy reference. thanks a million again!