Revamp the current Navbar

[leoshrey]

Feature request:

A more responsive Navbar having better user experience should be used.

Is your feature request related to a problem? Please describe.:

Based on the discussion https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/issues/144#issuecomment-806554050 with @vaishali614, I think revamping needs to be done with the current Navbar as it will improve the user experience and will make our website more readable and responsive.

Example of current Navbar:

https://user-images.githubusercontent.com/53581274/113848437-18274180-97b6-11eb-9d07-80c86504042f.mov

Here less spacing between the Navbar elements looks thronged. Also while scrolling down it doesn't feel responsive and reduces the view area.

Describe the solution you'd like:

• Navbar should be responsive (on scrolling) and more user friendly with better interface.

https://user-images.githubusercontent.com/53581274/113851920-9afdcb80-97b9-11eb-984e-8fe544947868.mov

• Spacing between the Navbar elements needs to be increased.
• Hover animation can be more attractive which will catch more attention of the user.

https://user-images.githubusercontent.com/53581274/113850524-30985b80-97b8-11eb-9a95-8666e4b56573.mov

More Suggestions

@vaishali614, I would love to see for more suggestions if any. If not then I am working on the above ones.

---

[vaishali614]

@leoshrey The discussion that we had on #144 was around navbar for view opportunity and post opportunity pages. This navbar looks fine to me. But I liked the hover animation. So you can try implementing that. No other changes please.

[leoshrey]

But I liked the hover animation. So you can try implementing that. No other changes please.

Sure, working on that.