Nav bar with icon support

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;

  1. 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.

image

  1. 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.

image

  1. 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…

image

… but on mobile we want to show the label as well …

image

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).

image

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.

image

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).

image

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.

image


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Forget about using Grid for that. It’s overkill and surely not appropriate. You need to constraint and align stuff, Flexbox is for you.

Make the navbar element (the one containing all MENU ITEMS) a flexbox, and align to the middle, so everything is vertically centered. Then menu items can be flexboxes too, with an image, followed by the text. When everything is aligned as you want, just shift the visibility for text or image depending on breakpointS.

Thanks Vincent, that worked well-
My divs are now aligning well with the other nav elements;

image

However the dropdowns are a bit funny- I’ve made two versions of the iconified Search dropdown on my linked test site. The first is flexbox-based and the second is grid-based.

At the desktop breakpoint they format well;

image

But in mobile breakpoints, the flexbox breaks;

image