Hi,
I making use of Mega Menu, set to sticky mode, within the header section of the Helix 3 Template.
The menu looks great when browser is full screen like so
https://imgur.com/a/df3uZUi
But then seems to break when I reduce the browser size like below. It loses the background colour of the row etc..
https://imgur.com/k1slYSM
Any pointers are appreciated.
Hello
Thank you for your query.
Could you provide me your site URL, please?
Hi Ariba,
Thanks for your attention.
I'm afraid that it's an Intranet site. Is there anything else I can do to help diagnose?
I appreciate this may be out of bounds of support.
Cheers
Kindly add the following css in custom css section and see if it helps.
#sp-header > .container > .row {
display: flex;
}
#sp-menu {
flex: auto;
}Thanks for the suggestion Ariba.
I added the suggested CSS within the Custom CSS section of Styles > (Applied Helix Style) Custom Code > Custom CSS to no avail.
For what it's worth.
Zooming in at 110% the menu looks fine but more than that, it also overlaps like when the browser is reduced in size, then finally collapses to the off canvas menu when zoomed in at 200%.
I have changed my main menu item to be a very long article, so I know it’s no other content / items on Page Builder effecting the display of the menu.
Thanks
Hi,
The moment I call the Section Title that holds the menu ‘header’ is when the formatting of the menu breaks (Text/Menu overlapping into the next row)
If the Section Title is called anything but header; it looks Ok and scales with the row. Problem is I would like to keep the section title called header so that I can enable the sticky header option.
Thanks