Hi there!

Thanks for reaching out.

Actually, the menu items are not getting enough space to fit in the menu column of the Header. So you can try to reduce the gap among the menu items or you can reduce the font size of them either.

Here is sample code for reducing the menu item gaps. Please use the following code in your custom CSS:

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span { 
    padding: 0 10px;
}

Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best Regards

Hi Rashida,

Thank you for your suggestion, however this doesn't seem to be making enough of a difference. It has improved it slightly by keeping the menu in the header area when the screen size is 1200 px or above, but lower than this, it still drops over the slider until 991 px when it switches to the off canvas menu. I wondered if there is some way to set the width at which it switches to the off canvas menu?

I have reduced the font size but that hasn't helped in any way.

Regards

Emma

Hi Rashida,

The code in the link you provided worked perfectly. Thank you!

Emma

Dear Emma,

Glad that it helped and you are always welcome :)

You may accept the most useful answer in order to close the post.

Have a nice day!

Thanks for accepting the answer:)