search

nashvillefcc / nashvillefccwebsite

Contains code related to Nashville FCC website
https://www.nashvillefcc.com
MIT License
9 stars 12 forks source link

Mobile navbar #82

Closed MoribundMedium closed 3 years ago

MoribundMedium commented 3 years ago

Resolves #48

Description of Changes

Adds a navbar to the mobile version of our site, fitting our design mockup: https://xd.adobe.com/view/3640d8e0-d80d-43e5-b7d0-fe240a00644f-6313/. The sliding transition animation is something I added, but should behave properly. The navbar is rendered display: none; when in desktop resolutions.

One thing to note: The hamburger and 'X' icons use the Font Awesome designs and don't match the icons in the mockup. Is this a big issue? I wasn't sure how to export the SVGs from the mockup.

How Can I Test This?

Open up the test branch on Netlify and test the buttons in mobile resolutions (in Chrome, pull open the devtools with Ctrl+Shift+I and activate the device toolbar with Ctrl+Shift+M, then choose either "Responsive" resolution at the top or any mobile device on the list).

itzsaga commented 3 years ago

Following up on what @Hellrungj mentioned. You can see the horizontal scroll bar in this screen capture: Kapture 2021-07-26 at 08 30 00 I haven't had time to dig into the code yet, however, it looks like the width of the screen is changing with the animation/menu sliding.

MoribundMedium commented 3 years ago

Thanks for the reviews @itzsaga and @Hellrungj! I fixed the issue by adding an overflow-x: hidden; rule to one of the sidenav's parents. I had to reassign its position: relative; parent at the same time but it should work!

Fixing commit: https://github.com/nashvillefcc/nashvillefcc2020website/pull/82/commits/9fe6357bda5e5ce3e5b07e068ffc43f6fe26d923