Flex Grow not working on Nav

Can someone please tell me why my flex grow isnt working on my nav. I dont understand what im doing wrong

3 Replies

EIO•10mo ago

@JJ your .header__links is wrapped inside the <nav /> element, which means that what you are tagetting is not the correct element. Your structure:

  .header__nav (display: flex)
    ↳ .header__title (flex child)
    ↳ nav (flex child)
      ↳ .header__links (not a flex child)

  .header__nav (display: flex)
    ↳ .header__title (flex child)
    ↳ nav (flex child)
      ↳ .header__links (not a flex child)

The best way to fix this is to remove unnecessary elements. I know you would prefer to use the <ul /> so I would suggest you remove the <nav /> instead, so that <ul /> would then become a direct child of .header__nav

JJOP•10mo ago

would that still be semantically correct if i remove the nav tag? What I also did was give the nav tag a flex 1 and leave the ul tag with the display flex and it seemed to work

EIO•10mo ago

I was waiting for this. The main issue is that where the "semantic" nav should start is where you have .header__nav So, ideally, instead of .header__nav being a <div />, it should actually be the <nav />. Remember the logo is supposed to be wrapped within an anchor tag <a /> because clicking on the logo should be able to take you home too. So, the <nav /> should be the whole line.

Gaming

Programming

Flex Grow not working on Nav