topic Re: Global Menu Child Menu Display in CMS Development

Global Menu Child Menu Display

AenghasHP — Mon, 14 Nov 2022 06:34:58 GMT

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!

Re: Global Menu Child Menu Display

Niharika — Mon, 14 Nov 2022 17:14:14 GMT

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

Re: Global Menu Child Menu Display

AenghasHP — Mon, 14 Nov 2022 22:23:40 GMT

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.

Re: Global Menu Child Menu Display

alyssamwilie — Wed, 16 Nov 2022 01:48:17 GMT

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; }

Re: Global Menu Child Menu Display

AenghasHP — Wed, 16 Nov 2022 01:40:48 GMT

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?

Re: Global Menu Child Menu Display

alyssamwilie — Wed, 16 Nov 2022 01:44:34 GMT

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.