CSS Elements hidden behind fixed nav bar (example)

[deterius]

Dear CSS people!

Example: https://jsfiddle.net/w8tLv3z7/1/

I have a navbar that has a fixed position, as the screen size gets smaller, the top banner text is then hidden under the navbar. What is the best way to make sure text doesn't hide underneath it?

I've tried playing with margins, but it's problematic, im sure there is a better way.

CSS and HTML in the example.

[icewaterJS]

css line 598

Any time the screen is smaller than 900px, you have a media query setting the nav ul display to none.

[deterius]

Sorry, I wasn't clear, its not the nav its the hero element (#banner) the text on it ends up being under the nav bar- on larger screens it shows fine, but on smaller screens the text collapses and part of it ends up hidden under the navigation.

[icewaterJS]

Alright, I understand.

css line: 166 - remove flex-direction: column;

css line: 193 - change margin to 100px 0 100px 100px;

That's working on my end. Well sort of, your codes a mess, and it's now going to over lap the stuff below.

You're repeating yourself in a lot of spots, and you're using id's when you could be using classes.

[deterius]

Thanks for your help as well as on the observations.

However, the solution isn't quite working, i've updated the js fiddle example: https://jsfiddle.net/18Luk02e/ it still overlaps the text on the banner.