Navbar Flexbox Issue
Hi everyone,
I'm doing this exercise in this video https://www.youtube.com/watch?v=DB34becnGSA&list=PLkC56g8fboI0QgD6VvH5TN0Nm1i5dVITH&index=10
I tried to push myself not only follow along the video and copy the example code but try to implement by myself first. After my first try, I watched the video and studied the sample code to see what's the difference with mine and improve it. So my code structure is slightly different with the example.
There are a few issues I cannot solve (you can see the issues in the screenshot.):
1. The alignment of items in
.navbar: It works fine with justify-content: flex-end; for the example code but it doesn's in mine.
2. The gap between the hamberger icon and the logo
3. The overlay conflict between the logo and the search bar
I reckon they are all related flex and media query concept. So I studied some related tutorial over hours but I still stuck here. Can anyone give me some guidance?
Code on Github: https://github.com/kris-lu-dev/ASMR-Web-Design-to-HTML-Exercises/tree/main/10-Gmail-Navbar
Live Demo - my approach with bug: https://kris-lu-dev.github.io/ASMR-Web-Design-to-HTML-Exercises/10-Gmail-Navbar/
Live Demo - example: https://kris-lu-dev.github.io/ASMR-Web-Design-to-HTML-Exercises/10-Gmail-Navbar/Example/
1 Reply
Why is the hamburger menu fixed ? If you want to use flex, the hamburger menu and Gmail logo need to be in their own div, then the search bar as a sibling and the four icons at the end also in their own div as a sibling.
Then for equal spacing they need to be the same width and to justify-content space between.
This would be a good layout for grid w less code since you want equal columns. And then have the div>icons as a flex row with the justify-content end. Or you can make your navbar grid more complex and have them all as direct children (instead of 3 wrappers) and lay out your grid columns for each piece.