Hi! Used bootstrap to create the portfolio page while sharpening existing development skills and learning a few new ones (i.e. bootstrap). The project is on my codepen profile.
I have one question. When you first load the page, the image and text-block loads about how I want it to initially (I’m speaking of the positioning of the top of the image in relation to the bottom of the nav-bar). However, when you do anything and click on the “Home” nav button, the top of the image now sits flush with the bottom of the nav-bar. I’ve tried various tricks to stop this from happening (different positioning and other suggestions that I found on SO) but nothing seems to stop the behavior. Any ideas on how to stop this from happening?
Thanks!
-Chris
1 Like
Hi Chris!
That’s a nice portfolio page you have made! The reason the space disappears, is because it jumps to the top of your home-div. A way to fix this, is to create empty space in your home-div. That way it will still jump to the top of the div, but it looks different because there is space between the top of the div and the content of the div. I don’t want to give the answer away immediately so I hope I’m still clear on this, but please do ask for clarification if needed! 
Evelijn
Got it, thank you evelijn! Though I’m wondering if there’s a better way to fix that issue (I’m actually a Java developer by trade but at this point in my career, I always end up stuck working performance enhancements on the back end), but it works.
Can I ask what you feel is ‘wrong’ with the solution I gave you? Just curious, because I think I understand what you mean, but I can’t seem to put it into words. (I’ve been trying to type an answer for 15 minutes now haha)
Absolutely. Don’t get me wrong, I’m not saying it is wrong–clearly it works. It just feels like I shouldn’t have to add empty elements just to force a container to do into position (it’s been at least 7 years since I’ve done any front end development though). I think it’s just something I’m going to have to get used to though–it’s just not the sort of thing I do in my day-to-day.
Make sense?
Ah yes! I get what you mean. Well, consider the About-div to be a new page. A new page also needs padding in the top to make sure the content isn’t too close to the top. That’s what is happening here too. It probably looks weird because your nav bar is fixed and thus overlapping your div, which is why you need extra padding for initial state of the site.
1 Like