In a couple of recent projects I’ve faced designs where the main navigation bar gave me more trouble than usual. These are the prerequisites that make the problem tricky to solve:
- The navbar is full-width and the links have to fill up the entire width regardless of how many of them there are
- The text in each link needs to be vertically centered and wrap to multiple lines if necessary
- The entire area of each item in the navbar needs to be clickable
After exploring lots of different methods I’ve found two solutions to the problem. As is often the case, both have their drawbacks and you need to choose which compromise to make.
Posted in CSS, JavaScript.
Copyright © Roger Johansson