There have been a number of posts on this topic, but none which seems to show the preferred design approach. My design seeks to accomplish a few things;
- Support 16x16 SVG icons + text in menu items, both on at the top menu level on the Nav bar, and in dropdown menus, e.g.
- At the top-level, support the icon + text on both Nav links and Dropdowns. The built-in Webflow elements for these are each constructed differently.
- By device (desktop, tablet, mobile) support the ability to hide or show the text or icon, depending on what’s best at that display size. e.g. here on desktop, only the search icon appears…
… but on mobile we want to show the label as well …
So far, partial success in getting this to work with Dropdown menu items, as you can see with the search example.
However I haven’t found a workable construction for regular non-dropdown menu items. The current variation I’m working with is a Link Block, containing a CSS Grid, with an Image (for the icon) and a Text Block (for the label).
However when I place my Link Block next to the Nav Links, the Dropdowns all shift down. Here, Home is my Link Block, Log-In is a Nav Link, and the other 5 items are all Dropdowns.
I’ve tried different variations of the Grid, inline block alignments, and flexbox approaches, with no luck. So close and yet so far, it feels like there’s an obvious setting I’m missing somewhere to make the Link Block behave?
I’ve checked and compared the settings carefully- one thing I’ve noticed is that the Nav Link has relative positioning (but no settings apparently).
However when I try to apply relative positioning on my Link Block, I don’t see the same configuration options. May not be relevant, but it’s the only distinction I can find.