Hello,
This will be a bit of a long, possibly confusing description so sorry in advance
1) If you are using the "full width" menu option specific to this Template the total # of columns must fit within the "Body Width" or overflow will occur forcing those columns to the row below. This will appear like the # of columns across aren't matching what you are setting in the back end parameters. You can disable this option in the Template Manager which will help with the width constraints a bit.
One thing that could help would be removing the min-width value in the s5_flex_menu.css here which will reduce the minimum required column width for each one, allotting more horizontal room for the columns to help with the overflow scenario. The most I seemed to be able to get with a default body width for this Template was around 7 columns after removing the mid-width but it also depends on the length of characters in the menu items.
s5_flex_menu.css - line 84
#subMenusContainer li.subParentBtn, #subMenusContainer li.subMenuBtn {
clear: both;
min-width: 200px;
padding: 0px 8px;
}
2) The second scenario is that the Flex Menu will always attempt to "balance" the amount of parents with the # of columns.
What this means is if you have say 4 Columns and 6 Menu Items it would appear like this:Menu 1 || Menu 2 || Menu 3
Menu 4 || Menu 5 || Menu 6
Versus:Menu 1 || Menu 2 || Menu 3 || Menu 4 ||
Menu 5 || Menu 6
Even though you stated 4 columns in the menu settings... The menus will always balance the parent items on row redistribution when they cannot fit equally in the chosen # of columns.
If you had 4 Columns and 4 Menu Items set you would just see it as.Menu 1 || Menu 2 || Menu 3 || Menu 4
Where 4 Columns + 8 Menus would appear as:Menu 1|| Menu 2 || Menu 3 || Menu 4
Menu 5 || Menu 6 || Menu 7 || Menu 8
So in summary if you wanted to have 6 columns instead of 4 or 5 you would want to:a) Remove the min-width value posted above from the s5_flex_menu.css
b) Use either 6 or 12 parent items, to prevent menu item balancing that would throw off the # of columns. For example if you use 7 menu items with 6 columns you would see a 4+3 stack but if you used 12 parents it would show 2 stacks of 6 when it distributes them evenly.
c) For more horizontal room you can try turning off the full screen menu option specific to this Template which will render it below the menu and to the right. Note that the overflow can still occur if it exceeds the edge of the page causing the same issue as the body constraints, in which redistribution will occur to a new row to stop " page clipping"
Hope this helps!
-Mike