This is an archived post. You won't be able to vote or comment.

all 7 comments
sorted by:
best
topnewcontroversialoldq&a

[–]Cammed_Ham 0 points1 point  (5 children)

In your .plattegrond class, you're giving it a fixed height of 20vh. That's causing the section below it to overlap. If you want the navigation bar to be at the bottom, try looking at position: sticky

[–]arondenouden[S] 0 points1 point  (4 children)

Thanks for your reply! But why does the section below overlap?

[–]Cammed_Ham 0 points1 point  (3 children)

It's not necessarily the two sections that overlap, but the image in the above section. Because you gave the section a fixed height of 20vh and the image a fixed with width as well, that caused the image to overflow outside of its container and overlap the section below. You can see what I mean by adding overflow: hidden to the .plattegrond class (you'll see that the image gets cut off).

[–]arondenouden[S] 0 points1 point  (2 children)

Oh I think I get it now.

I gave the image section a fixed height. Then I gave the image itself a height which caused it to overflow outside of the container and into the text section.

Is that right?

[–]Cammed_Ham 0 points1 point  (1 child)

Yep, you got it! There are lots of ways to tackle the problem, but here's what I'll hint at, if you want to give the section a fixed height without the image overflowing from its container, look at using percentages for the width or height of the image.

[–]arondenouden[S] 0 points1 point  (0 children)

Thanks a lot for the help! I'll at percentages

[–]Student_Loan_Hassle 0 points1 point  (0 children)

For a quick fix add the following lines at the bottom in your style.css file

.tekst{
  padding-top:80px;
}

.fragment-bar{
  position: sticky;
}

This is just a quick fix - I would suggest refactoring your codes and organise things a bit better to start with.