This is one of those situations where I’ve done a work-around but never figured out exactly why I needed to. I’ve attached a screen grab showing the elements in question.
I have a simple navbar link styled as “main nav links”. I add a dropdown link next to it and assign it as “main nav links”. All remains the same except that the dropdown version is positioned 10px lower than the simple non-dropdown version. I run into this all the time and usually just add a sub-style and move it’s relative position up 10px to accommodate. No biggie, just wondering why I have to do this.
I’ve tried adding the “main nav links” style to the main “Dropdown” component but this requires that I go in and change the “Dropdown Toggle” style to remove the native padding but I end up losing my rollover styling on the main component.
I then try adding “main nav links” style to the dropdown toggle element and the relative position shifts down 10 pixels. Can’t figure out why. My first assumption is that the main dropdown component must have some kind of native position shift, but as far as I can tell it does not. (does have relative positioning and and index of 900).
Thanks. This solves an instance of the issue and I’ve use this before. Just furthers my confusion on why the dropdowns shift, considering the flex layout is using top alignment.
This behavior is cause because the default style of the Dropdown component. It does have a style called vertical-align: top, and the other inline-block items doesn’t. You can take that away with custom code, since Webflow’s Designer doesn’t have the option to change vertical-align, but it’s easier to just use display: flexor display: grid, since their children become display: block automatically and behave like flex-chidren.
TLDR.: just use flex, it’s easier and have good support, no need to worry about it.
