Hello friends,
Noob here and I’m afraid I am struggling with this project. I would like to ask for help with the header, what I am trying to achieve is to have a nav with too many links so spans two lines but collapses smoothly.
Tha nav needs to go to the right of the logo but when ever I place the container inline, the flex operation stops working. Also as you can see, the nav is not collapsing smoothly - especially the second line.
All borders are just for reference.
So sorry for taking your time.
Any help would be greatly appreciated.
Kind regards
Justin
Code: https://github.com/dustandbarley/Responsive-Club-Website—help-request
Page: https://dustandbarley.github.io/Responsive-Club-Website—help-request/
Hi there,
Is this what you are trying to describe?
If so, all you would need to do is add display: flex; to your header. Note: I would suggest changing your <div> to <header> just for semantics. 
Instead of having nowrap, you could use wrap and the lines would collapse at max width display. If that is not what you are looking for, do you have an example of what you’re trying to achieve?
1 Like
Hello Kirativewd, thank you so much for helping out here. your suggestions are great and nearly resolved my problem, but I realise I didn’t explain very clearly., so I will try again.
I have cleaned up my code and tried adding display: flex; to the nav container to re-position the nav bar to the right of the logo as you have shown in your picture above. The problem I have found with this is that when the nav is in the correct location, it stops flexing when the browser is re-sized. if you have a look at the current project here https://dustandbarley.github.io/Responsive-Club-Website—help-request/ you can see the nav bar is now collapsing smoothly but in the wrong place. If you take a look at line 8 of the css file https://github.com/dustandbarley/Responsive-Club-Website—help-request.git and remove the /* */ the nav is positioned in the correct place but loses its flex.
So my question is how do I get the nav section to retain its flex capabilities when positioned to the right of the logo?
Thank yo uso far for your help, I do appreciate you have spent time to help me out. Thank you.
1 Like
Ah, okay.
What we’re running into is one of the default settings for flex. What you will want to do is put min-width on your .nav container.
.navcontainer {
min-width: 0;
}
Thanks again for your input kirativewd, I had another go and this is the best I could achieve: https://dustandbarley.github.io/Responsive-Club-Website—help-request/
Code
It’s stil not as I would like it as the logo on the left is collapsing. It would be great to have been able to keep the width fixed.
Thanks again
Justin
1 Like
So, on your .logocontainer you have max-width and min-width set—max being 320 and min is 200. Your logo is going to grow and shrink to fit between those two parameters. If you also change your min-width to 320px, your logo will remain at the width you want.
1 Like
Amazing… I could have sworn I tried that at least 100 times… But YES, you are correct. Thank you for helping me achieve the result I wanted.
Best wishes to you
Justin
1 Like
