Menu Items Wrapping onto Two Lines

Hi Spets,

Please check this page in our documentation:

https://www.ads-software.com/support/topic/menu-items-wrapping-onto-two-lines/

Regards,
Tom

Thank you!
but the link does not work. Please check!

I tried to put the code which is written in this file https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/ but it does not work for me.

The link that you sent https://www.ads-software.com/support/topic/menu-items-wrapping-onto-two-lines/ is not linking anywhere

Please help

Hi Spets,

Sorry the correct link is https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/

I have checked your site but it is not visible, please make it visible to I can see the menu.

Regards,
Tom

Thank you fr reply

Now its visible

[replying again as the forum index still shows Spets as the last responder]

The website is visible, any suggestions to make menu in one line on small screens?

I tried the code, but it did not work on my website.

Please help!

The website is visible, any suggestions to make menu in one line on small screens?

I tried the code, but it did not work on my website.

Hi Spets,

Please try the “How to reduce the top level menu item font size on smaller screens” CSS from this page:

https://www.megamenu.com/documentation/menu-items-wrapping-two-lines/

You will need to adjust the breakpoints and font sizes to suit your site. You have a lot of top level menu items so you will need to make the font quite small in order for all the menu items to fit onto one line, it may be better to rearrange your menu so that there are fewer top level menu items.

Regards,
Tom

ok, one more question how to make arrows next to menu items closer to the item?

And why If I put menu CENTER – it works only for small screens but for wide screens it does not work – it stays all the time in LEFT?

Thank you

Hi Spets,

1. Please go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap} #{$menu} li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    margin: 0;
}

2. It is due to your theme CSS, as it is your theme that dictates the width and position of the menu. To fix it, add this CSS:

.main-menu-wrap .header-left,
#mega-menu-wrap-main_menu {
  width: 100%;
}

Regards,
Tom

Thank you! it works.