▼
Streaming live at 10am (PST)

Ability to use display:flex within nav menu componant

#1

Hi,

Currently, when a navbar component menu is open, the rule 'display: block !important' is automatically applied (via .w--nav-menu-open).

I'd like to be able to style and position the nav links within the nav menu using display:flex, though whenever applied, is overridden by the !important rule.

(I tried adding another div inside the nav menu to act as a flex container but only links are allowed inside the nav-menu element).

Thanks

#2

You can add a div inside the menu, nesting the menu items, and then give the :flex property to it. The !important tag impose the :box property to a given element but it doesn't force inheritance—or I would be surprised.

#3

Hi @vincent, thanks for the reply.

I did try that - the nav menu doesn't appear to allow anything other than the links inside it?

Theres a public link here if helpful:
https://preview.webflow.com/preview/voxmedia?preview=6ff1cf68d6b40d4499eb9b47bf09995b

#4

Oh, I wasn't aware of that restriction. You can try to delete of those navbar link and put normal link in the div instead.

#5

It's a missing feature indeed.

  • I tried to replace the Navbar Menu with a custom one: it doesn't act properly as the default does
  • Tried to replace the Navbar Links with custom ones, same issue: same issue

So in order to use Flex on the Navbar (parent) and its Links (child), we need Webflow Developpers allow it somehow.

+1 For this Feature Request

#6