Global Menu Child Menu Display

[AenghasHP]

Hi,

I'm looking to change the global menu on our site (https://amps.redunion.com.au/). It spits out the menu too far to the right, which then creates a white space, which I assume is because of this code in the menus.css file:

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
white-space: normal !important;

It's obviously not a solution to delete that code, so I was thinking, would it be possible to have the child items spit out to the left of the menu to stop the overflow? Any guidance on how to have our menu display properly would be much appreciated thanks!

[alyssamwilie]

Try adding this CSS:

.custom-menu-primary .hs-menu-wrapper > ul ul {
    left: auto !important;
    right: 0 !important;
}

.custom-menu-primary .hs-menu-wrapper > ul > li > ul:before {
    text-align: right;
    padding-right: 3px;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper {
    left: auto !important;
    right: 100% !important;
}

[AenghasHP]

Thanks for your help. I just added that code to the menus.css and this was the result: 

It looks like it might spit all menus out to the left and not just the child and grandchild items? 

[alyssamwilie]

From the look of that mess it looks you might have deleted something from menu.css. The little bit of CSS I gave you shouldn't effect it in such a major way.  You should just paste it in at the very bottom of the file, not deleting/or replacing anything.

[Niharika]

Hi @AenghasHP 

Trust you are doing great.

To expan the menu to fill the white space. Please add below CSS

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-item a

{

padding:10px 15px !important;

}

Hope that would helpful.

Thanks

Niharika Goyal

[AenghasHP]

Hi Niharika, 

Thank you for responding, I added the code, but I don't think that's quite what I was after sorry. 

I'm trying to have the child and grandchild menu items flow out to the left, not in a padding fashion, but so that they avoid going out to the right which is what's creating the white space due to overflow.