Help with Flexbox Nav Bar.
I am a beginner in CSS and I wanted to create a navbar. I made an absolute div with css and used flex bot to justify it evenly. but the main Nav with the links is not in the center of the page, how can I fix it? Thanks a lot.
10 Replies
Please provide a minimal example or some code, all anyone can do is guess without.
try space-between
The whole navbar is an absolute div with margin in the sides. this div has
display:flex withjustify-content: space-evenly. In this div there are 3 elements: the social links, the navigation and the logo.
I want the navigation to be in the center of the absolute div but it's not.
Tried, still isn't in the center.copy the navbar into a codepen or a jsfiddle
Complicated for me, it's in a project and is dependent on svgs and other react components.
I think it is causing because the first element in the flexbox and the last are not the same width, but I'm not sure if it's really related.
Yea thats the case I believe
You're probably going to have to use grid and use something like grid-template-columns: repeat(3, 1fr)
Flex allows its children to take up as much width as they need, whereas grid is explicit in how much space each child should get. So grid is probably the answer here
https://codepen.io/vince1444/pen/JjeWpVe
Not responsive on mobile*
That's the only fix that will work?
Maybe I can make the centered element relative and just move it to center it horisontally?
That's even less responsive
Postion absolute on the middle one would work, but raises so many potential problems I wouldn't do it.
I think vince's solution with a grid is the easiest solution tbh.
Thx