[GOOD FIRST ISSUE] Make the Navigation Header Responsive

[elraphty]

Describe the bug

The Navigation header becomes unresponsive on smaller desktop screens, making the username invisible.

Loom Video

https://www.loom.com/share/c0e9ce48c97542e1b1fc7cb3b61a85c0

• Use CSS media queries to make the navigation header responsive on smaller screens, by reducing text sizes, and paddings
• Write a test to show that the username is visible from a desktop viewport width of 1440 - 950

To Reproduce Steps to reproduce the behavior:

Adjust the screen size to various desktop sizes by using developer mode

Acceptance Criteria

• [ ] I have tested on Chrome desktop
• [ ] I have posted a screenshot or video in my PR
• [ ] I have rebased and tested locally before submitting my PR
• [ ] I can submit a PR within 2 days of taking the bounty

Here is an example unit test Here is an example component test

[AbdulWahab3181]

Could you please assign me?

[Ekep-Obasi]

@elraphty please assign me

[elraphty]

Could you please assign me?

@AbdulWahab3181 let me give this to @Ekep-Obasi, you will get a couple of test issues next week.

[elraphty]

@elraphty please assign me

Assigned.