navbar update

[tthanhh-to]

nav bar is pinned, but covers some elements

[mpadil18]

Hi, Thanh, great work!

1. The navbar couldn't overlap the events and faq section since they were made with components from Material-UI, which has its own CSS properties that make them overlay elements by default (more info here).
   You can fix this by adding z-index: 10; as a property to the .navigation-container in NavigationBar.scss. This helps us control which elements we want to place in ‘front’ of the screen. Elements with higher z-indexes will take more precedence over elements with lower ones, so we just need to give the navbar a relatively high z-index so it can overlay even Material-UI elements.
   (I tested using 2, which worked, but I like to make the z-index higher just in case we add any elements in the future that start to take precedence).

2. Additionally, when the screen size is compressed to display the hamburger menu at the top, it appears to be a little cut off. Could we add more space between the menu icon and the edge of the browser window when the screen is smaller?

3. Could we add “CONNECT US” at the very end of the navbar options? (per the new wireframe)

4. Finally, when the user clicks on something in the navbar, they’re redirected, but the title of the section is cut off. Not sure if it's just my screen, but let me know.

Thank you so much!


[mpadil18]

We now have a final wireframe for the style of the navbar that we want to implement before the hackathon. There's really no difference between the new and previous navbar, but just thought it'd be helpful for you to see. :)