- This topic is empty.
November 16, 2015 at 2:48 am #234924
I’m using a priority navigation, so when there isn’t enough horizontal space available links are moved into a dropdown at the end of the menu. It’s made a bit more complicated as I have a title inline with the navigation, which effects the available space calculation due to the additional width outside the navigation. This will be reused with different titles, so I can’t set a pixel width on the element.
I actually have the layout working, at a glance. You can see this in the following CodePen:
When you resize the viewport items are hidden and moved into a ‘more’ link at the end of the list. The problem is I’ve had to use
overflow: hidden;on the div that follows the title to get it to line up and no wrap. The problem is the last list-item is a dropdown – so on hover, the menu is cut off.
Can anyone think of an alternative for this effect? I tried applying the classic clearfix but that didn’t work, I think the items wrapped or the div moved down below the title.
Hope someone can help, it’s a bit of a complicated one to explain!November 16, 2015 at 3:57 am #234926
Could this maybe work with using all floats, ISO overflow? Like my fork of your demo:
Very well formulated question BTW.November 16, 2015 at 4:31 am #234928
Thanks for that. Unfortunately when the browser is resized, smaller, the list drops underneath the title rather than staying side-by-side with it and they need to stay next to each other.November 16, 2015 at 5:41 am #234930
Yes because of the
min-widthon the title, to work around this you could use a more adaptive approach with fixed width’s for the floats ISO percentages. But this would mean a lot of breakpoints for every time the design breaks, and thus a lot of extra code in media-queries. Having said this; if this design is important to you, than doing it like that instead may be the best approach in this case, but please someone prove me wrong.November 19, 2015 at 4:43 am #235022December 8, 2015 at 9:21 am #235697
I settled on just using a fixed width for the title area, not ideal but it turns out the title was the same on all pages. So I can just about get away with it on this website – maybe not the next!
I really liked that approach @Atelierbram and I think I’ll try out this version on a future project. The only issue I can see is I think it used
flexboxso it would be interesting to see what the fallback as for browsers that don’t support that.
Thanks for all your feedback and suggestions :)
- The forum ‘CSS’ is closed to new topics and replies.