Helix Ultimate, How To Make The Menu To Disappear Earlier? - Question | JoomShaper

Helix Ultimate, How To Make The Menu To Disappear Earlier?

TK

Thomas Kitschke

Template 6 days ago

Hello,

could you please take a look to this site: https://www.bhp-weisshaar.de/

It's the Helix Ultimate 2.0.11.

If I change the windows size, the menu starts to spring down. Ist there a way to change the size, that it disappears earlier?

I tried: https://archive.joomshaper.com/forums/change-width-when-offcanvas-toggler-appears But nothing changed

I also tried: @media (min-width: 1250px){ .d-lg-block { display: block!important; }}

The Inspector says: @media (min-width: 1250px) .d-lg-block { display: block!important; } (if I change it in the ispector, it works, how I wish, but not on the site)

I use a override.css

I hope you can help me.

Best Thomas

0
11 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 days ago

And correct value here

@media (max-width: 1140px) {
.sp-megamenu-wrapper.d-flex 
{display: none !important;}

inside my previus code.

CLEAR CHROME CACHE DEEPLY.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 6 days ago

Hi Thomas,

You used wrong CSS, that's why it didn't work. Let me prepare you more elegant solution in next few minutes. Some I of that I will take from our Helix documenation and some I will write.

DELETE YOUR CODE PLEASE!

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 6 days ago
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, 
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after 
{margin-left: 3px;}

@media (max-width: 1250px) {
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}
}

@media (max-width: 1050px) {
.sp-megamenu-wrapper.d-flex 
{display: none !important;}
}

Instead of your CSS code, please try mine.

And in Template Options > Navigation/Menu > MegaMenu - set to display only MegaMenu, you will safe some space in desktop view for MainMenu.

0
TK
Thomas Kitschke
Accepted Answer
6 days ago

Hello,

Thank you very much, I have inserted the code. But unfortunately without success. Nothing has changed.

I have also inserted the code directly into the template options for testing. Unfortunately, that didn't work either.

Where am I making the mistake?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 6 days ago

Is working perfectly, as I wanted.

Maybe I will record you video?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 6 days ago

You forgot to disable Offcanvas menu here >> https://www.joomshaper.com/images/2021/12/28/menu-type.jpg

that may help solve problem on iPad horizantal view

0
TK
Thomas Kitschke
Accepted Answer
6 days ago

I would like to keep the offcanvas menu visible. But that is not the problem either. Please use the chrome browser and change the window size, here the problem still exists. At about 1200 the menu runs down, is still visible in the slider.

0
TK
Thomas Kitschke
Accepted Answer
6 days ago

I just tried Firefox, same Problem, please see the screenshots.

0
TK
Thomas Kitschke
Accepted Answer
5 days ago

The Inspector still shows: @media (min-width: 992px) .d-lg-block { display: block !important; }

At: class="sp-megamenu-parent menu-animation-pulse d-none d-lg-block"

If I change it, it works fine.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 days ago

So maybe using CSS hide [=] icon on resolution smaller than 1220 but wider than 1025px. More space for menu row and items.

0
TK
Thomas Kitschke
Accepted Answer
5 days ago
body.ltr .sp-megamenu-parent > li.sp-has-child > a::after, 
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after 
{margin-left: 3px;}

@media (max-width: 1220px) {
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 10px;}
}

@media (max-width: 1220px) {
.sp-megamenu-wrapper.d-flex 
  {display: none !important;}
}

GREAT, thank you, this code works!

0