Navbar Problem
When I click on toggle button, I want the nav items in center, below the logo, how could be done here?
https://codepen.io/hamzacodepen951/pen/BavNWKE
14 Replies
Move the nav to after the div "container" (but still within the header).
i would wrap the image and the nav together so the nav would be centered to image not page
wrap both in a div but inside a container?
yup just pack them together
https://codepen.io/cbolson/pen/poqJepb
(note - I updated the header to use grid to be able to ensure that the logo is centered)
This is happening.
I want toogle and icons with logo
then you need to follow Chris's codepen 😉
@chrisbolson you could have used
grid-auto-flow: column; instead of setting up the columns 😉I just tried that but it doesn't ensure that the logo is centered, does it?
ohh i didn't notice that lol
I changed my pen to use
grid-template-columns: repeat(3,1fr);which works just as well@chrisbolson I found another solution without touching html
you could just tell the nav to sit in the second row and span it across all columns
yes, true. That makes sense.
I actually added the grid code in after I had moved the nav outside of the container for my initial response. but you are right, it could remain where it was.
Hi Mannix and Chris, thank you for your help, I designed it using grid, please check and let me know if there are any problems in it, also it is responsive, and let me know the bad practices that I have used, I took me around 12 hours to make, I knew I take very long,😧
https://codepen.io/hamzacodepen951/pen/bGOdzXY