Solved Helix Framework

Mega Menu not looking good

Asked by Maximilian Grunow 4 years ago Last activity 4 years ago



The Drop Down Menu is very wide.
Does anyone know, how to fix this?

I'm using Helix Ultimate Version 2.0.5
Joomla Version 4.0.6

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
4 years ago

Use this custom css

@media (max-width: 1440px){
.sp-dropdown.sp-dropdown-mega {
    width: 550px !important;
}
}

6 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi

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

https://prnt.sc/26mdybe

-Regards

Maximilian Grunow Asked this
4 years ago

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

But not for the grand menu.

Mehtaz Afsana Borsha Staff
4 years ago

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

Maximilian Grunow Asked this
4 years ago

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.

Maximilian Grunow Asked this
4 years ago

This worked for me.
Tank you very much!

Log in to reply.