Standardizing Navbar Across the Site

Improvements

Read about Web Components and try implementing it for navbar for different sites which work on different frameworks. The idea is to build one component that will be used across all sites

Navbars on different sites(sub-domains of RDS) are different as of now.

We need to make it look similar and familiar to the user. So we are going to redesign it.

Design of New Navbar:

https://www.figma.com/file/bpFHG9hXM13GSLmTkoNsrF/Navbar?node-id=0%3A1

Few Details

• font : Roboto
• weight: 700
• active color : #49A82E
• hover color : #49A82E
• size : 16 px (try making it in rem)
• active underline height : 3px (color : #49A82E)
• RDS Logo Size - 50x50

Pay Attention

=> Underline should be under the text as shown in the image and not inside the container in which the text persists. => Underline should be only under the active tab, it should not be visible on hover. => For this site Events/Img tag(rds logo) both should be configured properly! => The full navbar should be changed to the toggle menu when the screen width is less than 970px.

There might be slight changes for different domains and you are free to ask in the comments for that

• https://github.com/Real-Dev-Squad/website-status/issues/233 - Akanksha
• https://github.com/Real-Dev-Squad/website-members/issues/261 -
• https://github.com/Real-Dev-Squad/website-www/issues/161 - Rohan (merged)
• https://github.com/Real-Dev-Squad/website-crypto/issues/240 - Shubham
• https://github.com/Real-Dev-Squad/website-my/issues/171 - Rohan