KPC
Kevin Powell - Community•2y ago
JJ

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
No description
No description
3 Replies
EIO
EIO•2y 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
JJ
JJOP•2y 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
EIO•2y 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.

Did you find this page helpful?