Hi

You can set the Mega Menu width from here,please follow the screensht below:

https://prnt.sc/26mdybe

-Regards

This setting does only change the width for this sub menu typ:

But not for the grand menu.

Hi

You have set this custom css width for this,that's why it looks weired.Please remove that css then it will be fixed

https://prnt.sc/26muho7

Hi,

I cannot find this custom css. The following css ist the only custom css in the custom css section of the template.

#sp-bottom,
#sp-footer {
    background-color: #e3e3e3;
}
a {
  color: #8fb624;
}
a:hover {
  color: #fff;
}
::selection {
  background: rgba(0,166,81,0.8);
} 
.sp-megamenu-parent>li.active>a {
    color: #a7a7a7;
    background-color: #8fb624;
    background-image: none;
    border-radius: 20px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 12px;
    text-shadow: none;
    transition-duration: 300ms;
    transition-property: background,color,border;
    transition-timing-function: linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sp-megamenu-parent>li:hover>a {
    color: #a7a7a7;
    background-color: #a9a9a9;
    background-image: none;
    border-radius: 20px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 12px;
    text-shadow: none;
    transition-duration: 300ms;
    transition-property: background,color,border;
    transition-timing-function: linear;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sp-megamenu-parent>li>a {
    line-height: 1.25;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    margin: 15px auto;
    margin-left: 10px;
    padding: 12px 12px;
}
#sp-header {
  background-color: #191919;
}
.is-sticky .sp-megamenu-parent>li>a {
    line-height: 1.25;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    padding: 10px 12px;
    margin: 10px auto;
    margin-left: 10px;
}
.is-sticky .sp-megamenu-parent>li.active>a, 
.is-sticky .sp-megamenu-parent>li:hover>a {
    color: #fff;
}
#offcanvas-toggler >i {
  color: #ffffff;
}
#offcanvas-toggler >i:hover {
  color: #ffffff;
}
.sp-megamenu-parent>li:last-child>a {
    padding: 12px;
    margin-left: 10px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
    color: #8fb624;
}
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    color: #fff;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
    color: #8FB624;
}
.burger-icon>span {
    background-color: #ffffff !important;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
    color: #8fb624;
}
.offcanvas-menu .offcanvas-inner ul.menu>li a:hover, .offcanvas-menu .offcanvas-inner ul.menu>li a:focus, .offcanvas-menu .offcanvas-inner ul.menu>li span:hover, .offcanvas-menu .offcanvas-inner ul.menu>li span:focus {
    color: #8fb624;
}
.sp-module ul>li>a:hover {
    color: #8fb624;
}
.article-list .article .article-header h1 a:hover, .article-list .article .article-header h1 a:active, .article-list .article .article-header h1 a:focus, .article-list .article .article-header h2 a:hover, .article-list .article .article-header h2 a:active, .article-list .article .article-header h2 a:focus {
    color: #8fb624;
}
#sp-header-topbar {
    background-color: #191919;
}
.offcanvas-menu {
    background-color: #333333;
    color: #ffffff;
}
.offcanvas-inner {
    color: #ffffff;
}
.article-list .article .readmore a:hover {
    color: #8fb624;
}
.offcanvas-menu .offcanvas-inner ul.menu>li a, .offcanvas-menu .offcanvas-inner ul.menu>li span {
    color: #fff;
}
.offcanvas-menu .offcanvas-inner a {
    color: #fff;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
    color: #c2c2c2;
}
.offcanvas-menu .offcanvas-inner ul.menu>li li a {
    color: #c2c2c2;
}
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .menu-toggler {
    color: #c2c2c2;
}
.sp-dropdown-inner {
    border-radius: 15px;
}
.sp-dropdown.sp-dropdown-sub.sp-menu-right {
    margin-left: -70px;
}
.logo-image {
    height: 60px;
    width: 60px;
}

I dont know what i should do.

This worked for me. Tank you very much!

Glad to know that:)

You are always welcome!

It would be very kind of you if you can manage some moment to give us feedback here:

https://extensions.joomla.org/extension/sp-page-builder/

https://www.trustpilot.com/review/www.joomshaper.com

Please let me know your name on the review. Thanks for being with us :)