Monitor Reply

Support

Change breakpoint

Permalink Browser Info Environment August 16, 2022 at 12:56 AM

I am trying to change the breakpoint for the menu here:https://newsite.iowaascd.org/index.php...

so it will break to the stacked style sooner that it does. I tried to change it under the touch menu to large size - but need to set it to a custom size like 1080 or so...

suggestions?

Type:	Ticket
Status:	Resolved

jb1 replied on Aug 17, 2022 at 4:01 pm Permalink Reply

Ok, the breakpoint size is a variable set in the editor (if one is not assigned, the default of 767px is chosen). The block's controller.php file reads this breakpoint and creates inline CSS code dynamically which means the most efficient place to change the desired breakpoint would be the block's form_setup_html.php file.

If you look around line 533 you'll find something like this:

$bsoptions = array(
   '575' => t('575px (extra small devices)'),
   '767' => t('767px (small devices)'),
   '991' => t('991px (medium devices)'),
   '1199' => t('1199px (large devices)'),
   '9999'=>t('Always show'),
   '10000'=>t('Always show BOTH (manually control via custom CSS)'),
);

You could add another value in between any of these to suit your design. Just remember to include the comma at the end of the line. And keep a backup of this file (and a note of what you've changed) as any future updates to the add-on would overwrite your customisations.

I hope this helps.

JB

plschneide replied on Aug 19, 2022 at 12:22 am Permalink Reply

Thanks I was able to do that. However it doesn't seem to make a difference. When I adjust my browser window it doesn't turn into the "stack" until about 720 px wide and I am wanting it turn into the stack earlier. (I cleared web and browser cache too)

I've changed it to different options and I don't seem to see any change.

Here is what I am doing and seeing:https://www.loom.com/share/f07ff16d53a9473abd1713d327d16b99

Ideas?

jb1 replied on Aug 19, 2022 at 8:55 pm Permalink Reply

Thanks for sending that through, it was helpful.

I've taken another look at the code and it seems like it should be working. But when I look at the source code of your URL in question the CSS code that is supposed to be located within the head of the page is not being created.

Perhaps if site caching is turned on in the dashboard, it's bypassing the "on_page_view" function in the block controller (around line 336). Or there could be some other quirk in V9.1.x. I can't tell for sure just yet.

One other possibility, but I can't tell from your video. Is the first checkbox for "responsive" turned on? I can only see the "hamburger" option is not checked (if you want a hamburger icon then you should check this.

At the moment I'm travelling quite a lot, so my time behind a laptop is pretty limited. If enabling the hamburger (or responsive option) - above - doesn't work, then I'd recommend for now just a simple CSS workaround, which will do the job and be forward compatible. You can add a little custom CSS within the block interface. But the correct CSS will depend on which options you have enabled (responsive on/off, hamburger on/off, hamburger style classic/modern).

This is a starting point:

@media (max-width: 991.98px){
   .mega-menuh {
      display: none !important;
   }
   #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4, #nav-iconmodern {
      opacity: 1 !important;
      pointer-events: auto;
   }
}

Once I've got your feedback I can confirm the exact CSS.

JB

plschneide replied on Aug 20, 2022 at 1:17 am Permalink Reply

Thanks for the feedback. I do have the the modern Responsive Support checked. Now when I switch to Enable Hamburger support. Then it works properly. I tried changing to various breakpoint options including my new custom one and it always breaks properly. When I go back to Responsive support it always breaks at a smaller size - no matter which choice I pick for breakpoint.

I appreciate your help!

jb1 replied on Aug 22, 2022 at 1:17 pm Permalink Reply

Ok, that feedback helps. I've gotten to the bottom of it. It's been a number of years since I designed this add-on, so some memories are a little rusty.
The "breakpoint size" is only applicable to the hamburger option - but I can see it's somewhat confusing when choosing the "responsive" option - I can see how you'd expect that it would relate to that too.

Here's a screenshot of where the "responsive" breakpoint is set:
http://take.ms/MPVD0

It's in the css/dcmegamenu.css file within the block, around line 147:
http://take.ms/5Sv4a

You can manually change the breakpoint from 768px to any other value you wish. I just recommend backing up that file and making a note of your customisation in case of future updates overwriting it.

Hope this helps.

JB

plschneide replied on Aug 22, 2022 at 1:42 pm Permalink Reply

Thanks! That worked perfectly.

Mega Menu (v7, 8, 9+)

Support

Change breakpoint

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post