Allowing that type of overflow is a little odd.
But anyway if you want the text to be below the nav you can add a z-index with a positive value (e.g. z-index: 10) to the #navbar selector.
You have errors in the HTML. You should validate the HTML. For Codepen switching the code highlighter can help catch syntax errors.
Switching Syntax Highlighting on Codepen.
Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see code marked in red. That is the new Syntax Highlighting showing you where the problems are.
Press the down arrow to the right of the code boxes and select the “Analyze” option. You can also use a validator tool.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).