Issue with Mega Menu

  • gvidano
    March 26, 2026 at 9:47 am

    Hi,
    I was able to create the site header with no problem, thanks for your help yesterday.
    Now I am trying to create a mega menu following the online video tutorial, I seem to be having an issue.
    For example on page svpremier.com if you click on the main menu and select “downtown san diego”, that should be opening up a mega menu but somehow it is not working. The mega menu flashes in and out of the page really quick for does not seem to stick.

    Any help is much appreciated. Thanks!

  • gvidano
    March 26, 2026 at 9:51 am

    I had # on the menu URL so that was creating the issue, disregard this.

    But I do have a question regarding layout. If you click on ‘downtown san diego’ now the mega menu seems to be showing only partially, the rest if off the page. Is there a way to fix this by changing settings?

    Thanks,

  • Ying
    March 26, 2026 at 10:13 am

    Hi there,

    You can set the navigation block’s Mobile Menu Type to Full overlay.

  • gvidano
    March 26, 2026 at 10:16 am

    It is already set to full overlay

  • Ying
    March 26, 2026 at 10:31 am

    But it’s shown as partial overlay, unless you are not seeing the same as I am:
    https://app.screencast.com/IKDNFljfBEKrx

  • gvidano
    March 26, 2026 at 10:50 am

    yeah, because I had the width set to 450px to create that effect of the menu being 100% height and specific width and coming from left side of screen.
    I was hoping to be able to create a menu looking like that but when you open the mega menu it expands the menu to fit the contents of the mega menu. Maybe that is too complicated…

    Anyway, I removed the width and now the site header navigation and menu is in full overlay mode.

    However the mega menu is not displaying correct still, it displays on the right of the screen even though I have the placement setting to bottom center.. should the mega menu show centered on screen?

  • Ying
    March 26, 2026 at 11:08 am

    I haven’t seen anyone using mega menu on mobile, I don’t think it’s a good idea.

    But if you want to try, can you set the overlay panel’s Position to Parent to .gb-navigation to test?

    If it still doesn’t work, I would recommend giving up the idea of using mega menu on mobile layout.

  • gvidano
    March 26, 2026 at 11:21 am

    I am using the mobile menu type toggle in my website even on desktop because I like the look.
    Mega menus dont work with that?
    Because I am intending to use this mega menu only on desktop… for mobile I intend to use a different menu completely that has no mega menu element.

    My issue now is on desktop and I am troubleshooting the site on desktop… if you click on menu item “downtown san diego” the mega menu opens on the whole screen properly but it is not centered…. all I want to accomplish is for mega menu to be centered on screen… is that possible?

  • Ying
    March 26, 2026 at 12:19 pm

    I understand, try add this CSS to see if that works:

    .menu-item-has-gb-mega-menu .gb-overlay--anchored.gb-overlay--width-full {
    width: fit-content;
    background-color: red;
    transform: translatex(calc((340px - 100%) / 2));
    max-width: 100dvw;
}
  • gvidano
    March 26, 2026 at 6:52 pm

    Thanks, I figured the issue was I had a width set up that was messing everything up. After seeing some websites navigation I liked, I am trying to go for the mega menu in mobile as well. I think it is doable with careful design.

    I tried it and right now I have an issue when you look at the website on mobile device and open the menu in the following order:

    Open Menu –> Click “Downtown San Diego” –> this will open the mega menu I have for that menu item –> scroll down and click next menu item “uptown san diego” or “ranch & coastal san diego” which should open a different mega menu I have set up for that specific menu item.

    You will see that when you click on the new menu item the prior mega menu that was open collapses (like it should when you open a new menu item) but the view center of the page does not reset to the top of the new mega menu so you can see the items on top first.

    Is there a way so when you click on a subsequent menu item that the view point scrolls back up to the top content of that menu item you are opening? Otherwise it looks so weird, you are seeing the bottom of the menu when you open it.

    Thanks!

  • Alvind
    March 26, 2026 at 11:09 pm

    Hi there,

    Unfortunately, this would require custom JavaScript, which is outside of our support scope. The script would need to detect the menu toggle, wait for the previous menu to collapse, and then scroll the viewport back to the top.

    Handling the timing and scroll behavior correctly, especially on mobile, makes this a bit more involved.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.