Helix Ultimate Force Mobile Menu For Max-width 1199px - Question | JoomShaper

Helix Ultimate Force Mobile Menu For Max-width 1199px

KE Comm

KE Comm

Helix Framework 2 months ago

I am using the Helix Ultimate Template. My Mega-Menu is too large for screens below 1199px.

Is ist possible to force the mobiule menu for screens up to 1199px instead of 990px, other than using custom CSS?

0
8 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 months ago

Hi

You have to done this via CSS. There is no default option to do that.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 months ago

Hi

Thanks for contacting us. I need to try it. Give me a screenshot of your issue.

-Regards.

0
KE Comm
KE Comm
Accepted Answer
2 months ago

With Helix Ultimate on screens 990px and below it shows the burger button:

above 990 it shows the full menu. I want it to show the burger button at 1199px and below, not at 991. Tha's what it is: Unbenannt2.png

This is what I want: Unbenannt3.png

Therefore I needed to add this to thew custom CSS:


/*** Tablet menu FIX ***/
@media (max-width: 1199px) { 
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 16px;
}
.d-none {
    display: none!important;
}
#sp-header nav.sp-megamenu-wrapper #offcanvas-toggler {
    display: block!important;
margin-top:1rem;
}
}

My question is: CAN I DO THIS WITH TEMPLATE STYLE SETTINGS OR NOT?

0
M
Marin
Accepted Answer
1 month ago

I need also this for Helix Ultimate. How to do it? My menu also does not show up correctly on smaller screens.

0
KE Comm
KE Comm
Accepted Answer
1 month ago

You can use my CSS Fix above and modify it, if necessary

0
M
Marin
Accepted Answer
1 month ago

Unfortenly this code doesn't work properly on Helix Ultimate. It would be awsome if we can easily configure break-points for each device.

0
M
Marin
Accepted Answer
1 month ago

I have made it:

@media (max-width: 1400px) { 
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span, 
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    display: none!important;;
}
}

This works for my needs.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago

Glad to know that.

0