I’m running into an issue with my project where if I resize the window, a majority of my text wraps and disappears underneath the navbar, is there a way to prevent this from happening, and what did I do wrong so I can prevent this in the future? (https://codepen.io/Dagreyby/pen/abLJLgo)
Look up a thing called css media queries. These will help you style a web page based on the width or height of the screen. So when a web page is viewed on a phone instead of a computer screen the webpage will move to fit that screen
Hey there,
From what I saw in your CSS code, you have given to the #navbar the position: fixed; rule.
According to MDN, with position:fixed:
The element is removed from the normal document flow, and no space is created for the element in the page layout.
That’s why your text hides behind your navbar. You could try position:sticky; and play around a bit with it.
Also, this thread helped me a lot as well.
1 Like
I played around a bit with position: sticky; but, the same problem still persists with the text disappearing underneath it when using a smaller display. I think I’m just going to take a break for the day. Thanks for the suggestion though!
I’m sorry, in my previous reply I only added the link to the stackflow thread, without saying that there, they provided an answer to this problem.
What they suggested is using align-self: flex-start. That way, the navbar stays always on top.
Again, I’m sorry for neglecting to add that to my previous reply. 
That’s totally okay, sadly though it didn’t fix the issue I was having with text disappearing underneath it on smaller displays. I think I’m just gonna have to continue looking around for a work-around to the issue but thank you for trying to help regardless 
Maybe revisit the user stories.
On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user.
That applies to regular sized devices.
On smaller devices there is nothing that says the navbar cannot be on top.
If your nav takes up a certain amount of width on the left side then you need to push the content over that amount of width so it doesn’t fall under the nav. You could easily do this with a left margin on the .main-section class. I’m not saying this is the “best” solution, just one.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.