In experimenting with the new Nav (Nestable) element from Bricks Builder 1.8, it seems that there is no way to position the icon in a Dropdown sub-element with absolute position which I had to do to overcome an irritating visual issue in the mobile menu view. It required custom CSS code, which I don’t believe should need to be required. This seems like something that should be included in the UI, or I’d even go so far to suggest this should be set by default. This required some guidance from an experienced & popular Bricks user in my Facebook post to come to the solution.
Problem: When viewing a centred menu list (usually in mobile view), the dropdown button/toggle is calculated in the centring of the item by default, and it looks wrong / off-centred in that way.
Solution: To make it look properly centred, it requires targeting the dropdown menu button with position: absolute. I suggest this be made default, or at the very least we have a UI in the Nav Menu element > Dropdown section to properly position the icon.
Custom CSS added:
.brx-submenu-toggle button > * {
position: absolute;
}
Without the custom CSS (notice the “Courses” text is not centred with the rest of the text, it looks off-centred):
With the custom CSS (notice the “Courses” text is finally centred as it should be, looks more visually appealing than the problem one above):
