Hello all. this menu design is so amazing, how to design a menu like that, with rounded underline and with less width than the text, the attached photo depicts my meaning clearer. thanks
Hi,
That looks very much like Google’s material design tabs component.
I would use that as a starting point and then tweak it to suit your needs.
2 Likes
Without looking at the original I would use a pseudo element like this.
The pseudo element is absolutely placed at the bottom of the anchor and set at 80% of its width (change to suit.)
Loads of other ways to do this.
If you want to see how google does it then use the developer tools in your browser and study the code. That’s the easiest way to learn.
2 Likes
thank you so much for replying, this code works well, but I faced an issue, the 80% width only applied to active link, the others still show full width underline even with 80% width, if I decrease it to 60% in the active link it will be too small, how can I fix that?
No they all show 80% width underline. The smaller items are harder to see because of the 10px padding on the anchors is included but you can remove the left and right padding to see the effect better.
It is working though.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.