Hi everyone,
I’m having an issue with CSS acting very weird!
I made a dropdown submenu, and some of the submenus have more columns. So they’re rather large.
I want the orientation of the bigger submenus to be on the container, because they shouldn’t be out of the screen. So I set the following:
everything between submenu and container to static
the container to relative
and the submenu to absolute.
In the designer it looks good. But somehow my absolute dropdown in the preview and published version isn’t relative to the container. It seems to be relative to the dropdown! But it’s static! In the inspector it’s all correct though…
I’m quite confident with CSS, but I’m lost here Does anyone have any idea what the problem here is?
Hi Anke I can’t check from here, wifi is limited today.
However the main thing to realize is that elements like dropdowns have their styling overridden at the element level by Webflow.js. If you’ve constructed something that competes with that it will likely be overridden in published views ( and preview mode, mostly as well ).
Main thing is to figure out what exactly it is that Webflow.js is doing that is breaking your desired layout. Once you identify that, you should be able to resolve it through some combination of wrapper elements and (worst case) custom CSS that uses !important.
If you’re looking at the aggregate styles and using Chrome’s inspector, it’s generally quite good but I have seen it miss things, and also report rule precedence incorrectly, very rarely.
I’m not sure exactly what you’re trying to do and there is no link to your published site, so I’d recommend you just try some things in devtools directly. Usually you can identify what’s causing the problem there more easily than in the Webflow designer. One thing to watch out for is that flex layouts and non-flex layouts do not always play nicely together, and you can get unexpected positioning and sizing results.
Hi Anke, I’ve something to add that may help you find the problem.
In brief, the rules of positioning have some edge cases that can affect the behavior. Two things to test and watch out for are z-index changes and 3D transforms, which create new stacking contexts.
If you’re using interactions, they tend to do 3D transforms even for very simple things like moving an element to the right 10px. That stacking context change can e.g. break sticky positioning.
Also I occasionally see mobile-specific differences. I have one site where a slide out interaction is breaking the sticky but only on mobile phones. No CSS change at all, but it behaves differently anyway.
Does anyone have any idea what the problem here is?