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
b1mind
b1mind17mo ago
Please provide a minimal example or some code, all anyone can do is guess without.
Azyrum
Azyrum17mo ago
try space-between
Strike
Strike17mo ago
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.
Azyrum
Azyrum17mo ago
copy the navbar into a codepen or a jsfiddle
Strike
Strike17mo ago
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.
vince
vince17mo ago
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*
Strike
Strike17mo ago
That's the only fix that will work? Maybe I can make the centered element relative and just move it to center it horisontally?
vince
vince17mo ago
That's even less responsive
Kevin Powell
Kevin Powell17mo ago
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.
Strike
Strike17mo ago
Thx
Want results from more Discord servers?
Add your server