How To Make The Mega Menu Full Width Of The Screen - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

How To Make The Mega Menu Full Width Of The Screen

J

Jhao-Siang

Helix Framework 3 years ago

Hello,

I have set the mega menu with full width settings. The width is under the max width of the container. How to make the width extend to the screen edge.

Thank you.

0
4 Answers
Order by
Oldest Newest Votes
J
Jhao-Siang
Accepted Answer
3 years ago #46863

Hi Pavel and Rashida,

Thank you for your answer. It works well. And there is container width of the default template, I change it with !important. 

#sp-header .container-inner > .row,
.sp-megamenu-parent {
    position: static !important;
}
.sp-menu-full.container {
    max-width: 100%;
    width: 100% !important;
    padding: 0;
}

Best.

0
Pavel
Pavel
Accepted Answer
3 years ago #46774

Hi. It can be done via css only. Something like this

#sp-header .container-inner > .row,
.sp-megamenu-parent {
    position: static !important;
}
.sp-menu-full.container {
    max-width: 100%;
    width: 100%;
    padding: 0;
}
1
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #46795

Hi there!

Thanks Pavel, we have a faq here to center submenus in fullwidth alignment: https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/troubleshooting-faq#how-to-center-submenu-from-mega-menu-when-is-full-width-alignment

Best Regards

0
Pavel
Pavel
Accepted Answer
3 years ago #46876

You are wellcome

0