SOLVED: Portfolio page help needed - scroll spy and toggle btn

Code Feedback
1

I feel like I am getting no where on this project.

1). My toggle button doesn’t actually close its navbar list.

I have made multiple trips to MDN, W3schools, and other sites that use toggle buttons in similar fashion (using the developer inspect tool), and still no success.

2). Scrollspy doesn’t change the navbar items as I expect.

Granted, I don’t have much content to scroll through unless the screen width is small enough, but still. Principle of the matter.

I know my design is very …plain, at best. I really am focusing on functionality at this time. If you do see something that I could do to make it look better I am all ears, but I am mostly here for 1). and 2).

Project Link - [http://codepen.io/hereonpurpose/full/XdGKBo/] (http://codepen.io/hereonpurpose/full/XdGKBo/)

1 Like
2

Maybe take a look at this, it is a simple example of a Bootstrap navbar: Bootstrap Navbar

Be sure to click the “Try this Code” button and then resize the page.

3

Hi. I had the same problem with the navbar list. I found a javascript function to collapse the list.

$(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a') ) { $(this).collapse('hide'); } });

Paste it into the JS panel on CodePen.

I didn’t use scroll spy but I did notice that when there wasn’t enough content the links to my section didn’t look right. It would reach the end of the page so my section wouldn’t be at the top but somewhere in the middle.

Off topic: I just read your page. I homeschool two kids also :slight_smile:

4

Thanks! I will go through that example. :slight_smile:

5

I haven’t tried to collapse the list with JS so I will give that a go to. :slight_smile:

Yeah, I don’t really have enough content for the scroll spy to work at most widths, but it’s annoying that it didn’t work as I’d hoped anyways.

And I relate on the links thing too.

I am very psyched that there is another homeschooling mom on here. :smiley: I haven’t met or talked to any other ladies until this point, so the fact you also are managing to teach on top of learning this stuff is awesome. (My husband laughed at how excited I got when I told him).

Thanks for taking the time to respond with some tips.

6

Figured it out!!! :smiley:

I tried both of your solutions, @prophen @rickstewart, but it turns out that I had linked to jQuery and Bootstrap in the wrong order!

jQuery has to come first then the Bootstrap link.

I thought my CSS had messed it up so I commented it out. When that didn’t fix it I finally noticed that my order of links was different than the example/tutorial. Voila!

Thank you again for your time and help.

2 Likes
7

Glad you figured it out, that kind of problem can be a forehead pounder for sure! :high_brightness: