This is the first project that I will have completed on my first attempt, usually I have a few attempts at the projects until I’m satisfied. However, unless I have enough negative feedback on this one I will be happy with my first attempt.
When viewing on smaller devices I wanted the navbar to be at the top of the page and have a bit of a gap between the top of the screen to the navbar. Unfortunately this resulted in the main-doc appearing both below and above the navbar when viewed on small devices. I had a look online for fixes to this however most seem to use JS which I have yet to properly get my teeth into. So, I came up with a bit of a cheeky fix that I’m pretty chuffed with! (not very fancy, I just added a white block at the top of the page above the navbar)
codepen link: https://codepen.io/Ian3/pen/qMwLdN?editors=1100
Any feedback welcome!