Browser: Any
OS: macOS
In the mobile menu, you can reduce the padding to the right side of the top level which then controls how close any icons are. If you set 10px of right padding, the icon is then 10px to the right of every menu item that has a submenu irrespective of the length of each label:
If you do this on the mobile submenu which is set by default to 45px, then the icons are brought a little closer but with two issues:
a) the icon is no longer clickable
b) all icons are brought closer but not to the amount you set. If I set 0px of right side padding then if the behaviour is the same as above, the icons on any submenu parent that has a submenu should be 0px from the right of the label. However they are not:
The icons are closer but are being kept in a line.
Inspecting the code, it seems this bit of Bricks css on the icon button is overriding the value:
.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu li>.brx-submenu-toggle>*, .brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu li>a {
padding: 0 45px;
}
Even if you turn this off in the browser, the icons are only brought as close as the one with the longest label length (newton poppleford):
Setting the padding on the mobile submenu should work in the same way as setting it on the top level menu.