1. Giver
  2. Friday, 07 February 2020
There seems to be a bug in the top menu system. When the browser is resized the items that don't fit on a single line are getting pushed down, but the menu doesn't collapse/resize as intended. We don't see a setting anywhere to change this, so is it possible to set the mobile break point for the "hamburger" menu to appear sooner?

Attached are screenshots to illustrate the problem: 1- shows the browser full-size; 2- shows the browser resized, with the last few menu items on a second line below the menu; 3- what it looks like when you scroll down the page, you can see the menu items just floating over the content.

I can provide our Joomla credentials if it helps speed things along.

Please advise!
Attachments (3)
Responses (3)
it can be sorted by custom CSS,
you have a few options, one of them it would be:
Reduce menu font-size and space between menu items when screen resolution is smaller than ___px

Second, to force using mobile [=] and hide mega menu when screen resolution is smaller than ___px.
But I have to know when it "crash", 1440px or 1260px ?

In general, it's not a bug. Menu - it is like passengers in the car. You can put 5 normal people, or 8 kids, or only 3 fluffy ones. Gabriel Iglesias always repeats that's he is fluffy, not fat.
  1. more than a month ago
  2. Giver
  3. # 1
Reducing the font size and padding between items helps, but still doesn't solve the issue completely.

I was expecting that if the menu was pushed to two lines in those "middle" screen resolutions, that the background height would adjust with it?

1440px is the resolution to answer your second question.
  1. more than a month ago
  2. Giver
  3. # 2
Use also this line of code :

body.ltr .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span::after {margin-left: 2px;}

AND this one

@media (max-width: 1380px) {
body.ltr #offcanvas-toggler.offcanvas-toggler-right {display: block !important;}
.sp-megamenu-parent.menu-animation-fade-up.d-none.d-lg-block {display: none !important;}
  1. more than a month ago
  2. Giver
  3. # 3

There are no replies made for this post yet.
Be one of the first to reply to this post!

This forum is archived

This forum has been archived. Please use JoomShaper official support system.