NO BUG: Menu nav links and dropdown vertical align

https://legal.optimizeweb.nl/ the dropdowns and nav links are not aligned 100% correctly vertically in the main menu, the nav links seem to have dropped a bit lower since update.

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

It looks like the same bug as described here https://forum.bricksbuilder.io/t/wip-the-carat-in-the-dropdown-menu-gets-same-width-as-the-contentbox-when-hover/27902/2

Hi Joe,
Thanks so much for your report!

Unfortunately, I can’t judge that because I don’t know what it looked like before or how much “a bit lower” is.

The only thing I can see is the horizontal width of the caret, which is a confirmed bug (see the link friiitz shared) :thinking:

The distance of the dropdown content is set in the dropdown content transform settings. As far as I can see on the frontend, you set the following values:

Default state: 3.2rem = 32px
CleanShot 2024-11-14 at 09.43.46@2x

Open state: 1.6rem = 16px
CleanShot 2024-11-14 at 09.43.56@2x

And that’s precisely what it is. Can you show what it looked like with the previous version?

Best regards,
timmse

The problem is that there seems to be a larger margin on the top of these navigation links than on the bottom. It’s subtle, but it’s there. This is especially visible when viewed next to the dropdown, which seems to align fine.

This was not the case before. I also don’t think I touched this or manipulated it. I think it’s there since I updated to 1.11.1

Sorry just passing by, looking at the code itself. There is 1.5 lineheight set on li tag. If that’s changed to 100%, it will eliminate the extra unwanted spacing.

I hope it helps :slight_smile:

Tnx. Well, this is my point is more or less: I haven’t set anything. I think this just popped up with the update.

Edit: hmm now that I look at it, seems to be an Automatic CSS thingy. That plugin is getting more and more intrusive in an unwanted way.

Hi guys,
The line height was also my first thought - but in my opinion it is due to display: inline-flex of the text links.

If you use display: flex instead of the default display: inline-flex on .main-menu--nav-link, it fits perfectly.

Funnily enough, the problem is only visible if the font size is relatively small.

Ok tnx but for my sanity, is this something 1.11.1 added?

No,
As far as I can see, it’s been inline-flex since the text-link element was introduced.
I don’t know whether you’ve only just noticed the problem or whether other things influence it.

I can only reproduce it if I make the font size significantly smaller. But yeah… it isn’t easy to spot, but it is easy to fix.

You can insert a new nav nestable element as a test: everything is fine with the default settings, right? Since we have not received any further reports on this, I tend to regard it as a no-bug for now. Ok?

1 Like

Ok. Sure I don’t mind if something is a bug or not, I just report what I think changed with updates :slight_smile: