Fixed-navbar for portfolio problem

#1

Hi guys

I’ve been pulling out my hair for the past two days trying to figure out why my .block1 (the one with the Rick Sanchez name) keeps moving the whole section down when I try to set the margin-top

-This issue only came up when I decided to add the navbar-fixed-top, but I didn’t change anything with the parent divs…

I’m fairly new to this so any help/input would be greatly appreciated!

Here is a link to the code:

#2

The issue is that your
block1 has margin-top: 280px creating all that space from the top, thus letting the navbar stretch.

I suggest you to remove that margin-top and instead create a small margin of the same height of the navbar for the container-fluid so that everything looks nice.

The idea is that you have a navbar (let’s say 20px height) that will always stay on top… so I just “move” all may main page container 20px below.

Hope it helps.

#3

Thank you for the response!

In terms of why I put the 280px margin-top, it is because I wanted the name/.block1 to move within the first section.

This is what I wanted it to look like before I applied the .navbar-fixed-top
https://codepen.io/techhamster/pen/vZaKYG

Is there a way I can move my name’s margin-top (or move it towards the middle) without creating that gap?

#4

If you want to keep the current layout as it is,
I’d make the section1 (the parent) a flex-parent by adding:

display: flex;
flex-flow: row nowrap;
align-items: center;

So that block1 is in the center (plus you probably have to adjust height/width and flex property of it as well).

Or if you want to stick with bootstap I’d implement the classic grid system.
So instead of a “div” inside a “div” make them row and col and offsetting them.

Before I forgot like before:
WuBBA LUBBA DUB DUB

1 Like
#5

Thank you so much!!

I still haven’t learned how to do flex boxes yet so I’ll make a copy that uses the grid system and another one that uses the flex parent properties

I appreciate the help @Marmiz

(WUBBA LUBBA DUB DUB!)

#6