Modern communications site child items on navigation shows up on a wider grid

Question

I have a communication site set as hub site and have team sites linked to it. I added child links to one of the team site links and below are the screenshots for the same.

Upon hovering over Operations, I see below big banner. I have modern script editor web part added so was wondering to make this look smaller and nicer by overriding some css classes.

Can someone please provide with css code that I can leverage. FYI, I tried leveraging ms-MegaMenu-Callout root-360 and withDivider ms-MegaMenu-gridLayout classes and set max-width parameter from 1200 px to 120 but did not work for me, it works when tested with developer tools by providing some inline css but when adding it to script editor web part, it sort of does not work.

Please help, thanks in advance.

Answer 1

you can go to the 'Change the look' option for the hub site and chose a different menu style (Cascading) from the 'Navigation' options. This will narrow down the menu and may be useful for you.

Please note, Mega Menu can also look nice, if there are multilevel content. See the below mega menu: