Navbar collapse menu is not the same width as the actual navbar. How do I fix that? Navbar also doesn't appear in smaller windows

Question

I am trying to make a sticky navbar, that will be collapsable in smaller windows(smartphones). The first issue is that it looks like this (pic included) and doesn't have the same width as the actual navbar. The second issue is that navbar doesn't fade in, in smaller windows. I am fairly new to this, so any suggestions will be welcome.

EDIT: I added a codepen

Codepen

Picture

enter image description here

This is what I have included in project

enter code here

Answer 1

If I inspect your page, I can see that your panel is inside #navbar and this element has 1rem padding on the sides. So when you put 100% width, it is the width of the parent ie inside the padding. What you need to do is to not have the padding on the big container itself. Instead you put this padding separately on the top bar with the button and on the panel.

You may have to create another container to fix your issue. Although you are using Bootstrap (which I am not familiar with). It might not be as easy to remove padding but all I can say is that this is the reason why your nav panel is not full width on mobile.

I know as a fact that making this sort of navigation bar which works nicely on desktop and mobile with a panel is not easy to achieve. Good luck.