Should I future-proof this component or leave as designer intended?
I have this navigation component I made where the search bar and bottom links are lined up nicely (see pic). I did this using grid and set the grid columns to
300px 1fr 300px for both the top container (the container with the logo & search bar) and the bottom container (the other links).
This is working OK right now, but if I add another link to the bottom container, it'll break. Is there a more elegant solution than my grid solution that I'm not thinking of, or is this one of those designs that are nice in concept but don't really work in theory? It's connected to a CMS that allows admins to add more links to the nav
7 Replies
I think no matter what, since the bottom link container's width will always be tied to the search bar, it'll break if the # of links exceed the width of the search bar. So I think no matter what solution I have, it won't work in practice. Unless I do some crazy JS where I check if the links will overflow somehow which I'm not doing
I think I'm just going to remove the whole line up and just go with centering the bottom links
Couldn’t you put flex wrap on them?
Nah, flex wrap would break this design since there's a dropdown menu
Assuming you’re using a ul here, you could have the link and the drop down menu div in the same li. Then set it to display block from display none on click and it will push any other elements down etc
Got you but don't think that would work:
oh right i see, yeah it might be a tad difficult in that case