hum... nevermind.. the good one is from WebOrder menu, not from webOrderMobile.

This is not jsut CSS unfortunately. WE can "hack" it with a custom css.. but something changed in the html structure.

on old menu, setting pbBeginGroup, just set's a top border on the menu item.

But, on new hamburger menu, a new li item is created instead,

Code:
...
<li class="WebML_Divider">&nbsp;</li>         
<li class="WebMenuItem  Web_Enabled WebItm_BgnGroup" data-df-path="2" style="
    border-top: 1px solid #D9D9D9;
"><div title="Sales Person Query"><span class="WebItm_Icon">&nbsp;</span><a tabindex="-1" href="javascript: void(0);">Sales Person Query</a></div></li>
...
Which as you observed, occupies an entire slot in the menu list, and what is worst.. it can take the focus.. if you move the mouse over it, you can see the color changing from black to gray

So, you have 2 options here.. change the divider item height to 1px , or try to revert it back as it was before, not showing it at all, and put the border on the desired menu item.

The better approach should come from DAW, as they for sure had a reason for changing this... but it seems it was not done completely.

Hacking it, with the 1st approach, this custom css in your application.css would make it narrower.


Code:
.WebMenuList .WebML_Divider {
    height: 1px;
    background-color: #D9D9D9;
    color: #FFFFFF;
    /* font-family: 'open_sanssemibold'; */
    font-size: unset;
    padding: 0px;
    text-transform: unset;
    border-bottom: 0px;
    
}
But , I am not sure if it will disturb something else in other places.. I hope not.