Why scrollspy doesn't work? How to make navbar bigger?

1

Hello, everyone! I think I’ve completed the portfolio, but I might change something later.
So far, I’ve got two problems:

  1. Scrollspy doesn’t work. I don’t know why. I’ve found examples and did as others, but still, nothing. I hope someone can help with that…
  2. I tried to make my navbar ( buttons like ‘Home’, ‘About’ etc.) bigger, but I couldn’t. Again, I hope someone will help with that.
1 Like
2

You’re missing the javascript links for the jQuery and Bootstrap libraries. You may also need to add the javascript code to initialize scrollspy on page load if that doesn’t fix it.

3

And as I remember the links order is important - first put jquery link - and only then bootstrap js link

1 Like
4

@kurumkan - That’s correct. The Bootstrap library is dependent upon the jQuery library so jQuery has to be loaded first. Scrollspy is part of the bootstrap library so that one is also required to get the it to work.

5

thanks a lot!
do you know how to make the nav bigger?:sweat_smile:

6

The best way to customize bootstrap built in stuf - is to append your own classes. Have a look a this SO answer - http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3 (look for ZimSystem ) So it will be much easier! Try to avoid !important stuf!

7

You have a few options to make the navbar taller (or thicker). Note that since you have a fixed navbar, you’ll have to adjust the padding for the body tag in your CSS file to prevent the navbar from hiding the top part of your page.

// This will work with your current code
nav.navbar.navbar-default{
   height: 80px;
}

You could also do what @kurumkan said above and use a custom class like navbar-custom. I try to shy away from using IDs for my elements and using !important is typically a sign of bad design and can cause unexpected results. That option would look something like this:

HTML (adds the “navbar-custom” class to the element):

<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">

CSS:

nav.navbar-custom {
  height: 80px;
}
8