Fixes Navbar responsiveness

[ahmedfahim21]

Fixes #696

Changes:

• For tablet view, the navbar had some responsiveness issues like not completely covering the complete screen width. This probably was happening due to absolute positioning however, its nearest positioned ancestor changes with changing screen sizes. Fixed the problem with the use of fixed navbar and adjusted its opacity so that it does not interfere with the body text.

Screenshot of the problem:

Screenshot after making the changes:

[limzykenneth]

I cannot replicate the issue you are seeing, I think you may be seeing a different problem than what the original issue is describing. Also changing the positioning to fixed from absolute changes the behaviour of the navbar (it becomes sticky) which is not what we want.

[ahmedfahim21]

@limzykenneth I am not sure why it didn't replicated for you, but what I found was that for devices with screen width between 780px and 980px, the phenomena occurs. As for keeping it sticky, I initially tried keeping the positioning absolute but its nearest positioned ancestor changes with changing screen sizes, so keeping it fixed was the only I figured out to solve this. This might not be the most optimal solution, but maybe we can keep it sticky only between that range and absolute for others. Should I try this then?

P.S. I am actually a beginner at Open Source. I have used P5.js previously and loved it. After getting to know that is an open source project, I became very interested and wish to contribute to the organisation. It would be great if you could suggest me some issues which I could try (it can be slightly intermediate too, I am familiar with web development but very new OS).

[limzykenneth]

I'm guessing you are viewing this on Chrome's devtool? It is actually not displaying correctly on the Chrome devtool because the problem is not that the navbar is not stretching to the edge but rather the content, specifically the .container class is hardcoded to be 49em which it shouldn't be and is going out of the screen. Viewing it on another browser's devtool will give a more accurate view.

[ahmedfahim21]

I'm guessing you are viewing this on Chrome's devtool? It is actually not displaying correctly on the Chrome devtool because the problem is not that the navbar is not stretching to the edge but rather the content, specifically the .container class is hardcoded to be 49em which it shouldn't be and is going out of the screen. Viewing it on another browser's devtool will give a more accurate view.

Yeah! you are right, in some other browser's devtool, the problem doesn't occur. However, I initially came across this problem while checking the website on my tab. So I think the problem is not just Chrome devtool but all of Chrome browsers in general.