Zooming the Chrome browser in to 90% sometimes causes the library file supersubs.js to miscalculate the width of sf-multicolumn or the division width or sf-multicolumn-column. Then multicolumn will not be side by side, they may look stacked.
Create multi-column sub-menus, See this link
https://www.drupal.org/docs/contributed-modules/superfish-drop-down-menu... →
In Chrome devtools. I can see that supersubs.js is calculating a total width of the menu and adding it here inline using the css() Method:
<ul class="sf-multicolumn" style="width: 501px;">
And then it is repeated here:
<li class="sf-multicolumn-wrapper " style="width: 501px;"><ol style="width: 501px;">
Then it divides the total width by the number of sf-multicolumn-column in your menu, I have a 3 sf-multicolumn-column and 501 divided by 3 is 167. And supersubs.js injects that number for each sf-multicolumn-column here::
<div class="sf-multicolumn-column" style="width: 167.969px;">
The problem is the width of 167px was too wide for my 3 multicolumn and instead of having 3 columns side by side, the last column was under the first 2 columns. Changing it to 164px wide fixes the problem. This is the css I added. And when supersubs.js adds css inline you need to use !important to override it.
li.sf-multicolumn-column {
width: 164px!important;
}
The supersubs.js is doing the calculating in the library file near line #48.
/libraries/superfish/supersubs.js
My question is how does Superfish get the total menu width 501px? I did not specify a width to any of the main wrapper classes like, #superfish-main sf-menu sf-main sf-horizontal. And when I do override this width of 501, it still does not calculate the width of the individual sf-multicolumn-columns.
Using Superfish module version: 8.x-1.4, and Superfish library 2.x
Closed: outdated
1.4
Superfish Library
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.