How To Change When Menu Switches To Off Canvas Menu (Screen Size) - Question | JoomShaper

How To Change When Menu Switches To Off Canvas Menu (Screen Size)

J

Jan

Helix Framework 1 year ago

On our Webseite www.beracom.de the menu changes automatically into the Hamburger Menu (Off Canvas Menu) when the Screen gets too slim. But before it changes, the menu moves into the header picture at certain screen width. How do I make it change to the Hamburger Menu as soon as the normal menu doesn't fit the screen anymore?

0
13 Answers
Pavel
Pavel
Accepted Answer
1 year ago #104840

Hi Jan .

Try this code

@media (max-width: 1399px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}

or for your specific case

@media (max-width: 1399px) {
    #sp-header .sp-module {
        max-width: 170px;
    }
    .sp-megamenu-parent>li>a,
    .sp-megamenu-parent>li>span {
        padding: 0 10px;
    }
}
@media (max-width: 1199px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}
1
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #103117

Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

0
J
Jan
Accepted Answer
1 year ago #103392

I would love to. How do I send a photo in here?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #103523
0
J
Jan
Accepted Answer
1 year ago #103634

I can not just download any software here. All I want is for you to go to our website and push your browser smaller so that you see that our menu is not above the main picture anymore, put in the picture.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #103743

Are you talking about this portion?

https://prnt.sc/G3CT6mXWcvZ5

0
J
Jan
Accepted Answer
1 year ago #104602

Hello, yes exactly, that is the issue.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #104734

Please follow this link below. Follow Paul's instructions

https://www.joomshaper.com/forum/question/5291

0
J
Jan
Accepted Answer
1 year ago #104835

But this does not solve my problem. All I want is for the automatic change to the burger menu (that happens anyway, when the screen gets too small) to happen earlier. I do not want the menu to have two lines. I want the menu to switch to burger menu as soon as it doesnt fit on the screen anymore.

0
J
Jan
Accepted Answer
1 year ago #109051

Thank you! That worked. But after updating joomla the Code Changes were deleted. Will we have to add the code again after every update? Or is there a way around that?

These data seem to be deleted when updating Helix-Ultimate: templates/shaper_helixultimate/scss/responsive.scss /templates/shaper_helixultimate/css/template.css

0
Pavel
Pavel
Accepted Answer
1 year ago #109080

Hi Jan. Never edit core files.

Reading documentation is always useful ;)

https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/custom-code-css-js-meta

0
J
Jan
Accepted Answer
1 year ago #109085

Hi Pavel,

thanks for your quick response. I restored the original core files and added the custom css as recommended per documentation. My problem now is that the "burger-icon" Menu is not visible (yet clickable), although the css seems correct. Also, after clicked, the "li" menu-items are hardly visible. "Insert Image" doesn't seem to work with local files, otherwise I would be glad to send a few screenshots. You can easily view this on https://www.beracom.de/ with a screen width of e.g. 1170px. Thanks a lot in advance.

0
Pavel
Pavel
Accepted Answer
1 year ago #109106

I see no problem. I think you need to clean the browser cache.

0