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
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/
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
.navbarjustify-content: flex-end;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/
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
