导航栏折叠菜单与实际导航栏的宽度不同。 我该如何解决？ 导航栏也不会出现在较小的窗口中

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.