Kevin Powell - Community•12mo ago

Uniform Nav Bar

I'm trying to have 3 sections in my Nav which all have equal width's. What is the better / more optimal solution to achieve this? Thank you 🙂 https://codepen.io/Matt-CopOffMatt/pen/MWLPEGq

Matt (CopOffMatt)

CodePen

Uniform Nav Bar

...

3 Replies

J-Sun 🎷☀•12mo ago

How about just changing your nav to grid like so?

nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@Matt That's the shorthand btw for:

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr;

Anurag Gupta•12mo ago

I think Grid will be a better choice because you can set the width of all three columns equal easily by: grid-template-columns: 1fr 1fr 1fr. Alternatively, you can use display: flex; and flex: 1 1 auto; for each of its children

MarkBoots•12mo ago

Wonder if OP is still interested in getting help. We're past 48 hours from the first response, but no reaction. Too bad, some of us put in time and effort to help others, but sometimes it feels like a waste of time Strange, because OP is still active in other channels

Gaming

Programming

Uniform Nav Bar