Help with personal portfolio page

I’m working on my personal portfolio page ( I have 3 questions:

  1. In my navigation, when minimized the little sandwich navigation won’t work.
    NOTE: I used brackets to write things first, it worked when I tested there. When I moved my code to codepen, the minimized nav doesn’t work anymore. Any ideas on how to fix?

  2. in my Dev section, when sizing the screen the Sample Site pictures and the Sample Site copy are not moving together - even though I’ve set them to be centered in the CSS. Also, the Sample Site icons overlap some as they are sized. Any way to fix those issues?

  3. I’d like my sections to appear in full screen. For instance, when you land on my page I’d like to see the image and AVerity Consulting logo to fill the whole page. Then if you go to any item in the navigation, you would be moved to that section automatically, and that section would take up the whole page. Sort of like a parallax layout. Any ideas?

Any input would be helpful!


  1. Your navigation hamburger isn’t working 'cause you didn’t add jQuery. Bootstrap JS requires it. Add it before it in your pen settings, and the toggler should work fine.

  2. There’s no “position:center”; If you remove the display:block the images will be centered at lower resolutions but that won’t solve the overlapping issue. For that one, give the image a img-responsive class; then, to center them again, replace text-align:center; with margin: 0 auto.

  3. You can use min-height:100vh; on the “sections” you would like to fill the whole page vertically (see more here about vh units)

Nice portfolio by the way. I like the color scheme and layout.

1 Like

Thank you so much, I made those changes and everything is working EXCEPT for my nav hamburger. Added the jquery script in the pen settings under javascript but it’s still not working. I appreciate all your help and the complements - I feel like I’ve been working on this simple page forever!

You did add the JQuery, but you need to add it first, then Bootstrap. The Boostrap JS depends on JQuery, so that is why JQuery must be added first. You just need to flip the order of those two in the JS external links section of your pen.


Thank you - worked perfectly! I appreciate your help.