Make the Navigation Header Responsive

[Ekep-Obasi]

Describe your changes

Issue ticket number and link

closes: #376

• [x] The Navigation header is now unresponsive on smaller desktop screens and username is visible
• [x] Wrote a test to show that the username is visible from a desktop viewport width of 1440 - 950

Evidence

Test:

Recording

https://www.loom.com/share/172d3a447a834b6e8451133dc5c82c0e?sid=c3d78ec7-45ca-4137-a724-519d8d11b80a

Type of change

• [x] Bug fix (non-breaking change which fixes an issue)

Checklist before requesting a review

• [x] I have performed a self-review of my code
• [x] I have tested on Chrome and Firefox
• [x] I have provided a screenshot or recording of changes in my PR if there were updates to the frontend

[elraphty]

@Ekep-Obasi There is a slight difference between the left margin of the Nav Links on your change, which makes the Nav Links close to the Sphinx Community Image, please fix the margins thanks.