Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Help aligning Overlay Panel Mega Menus (GenerateBlocks Pro + GeneratePress Pro)

  • arreaga88
    November 3, 2025 at 2:57 pm

    Hello GeneratePress team,

    I’m currently using GeneratePress Pro and GenerateBlocks Pro, specifically the Overlay Panels (Mega Menu) feature.

    I’ve set up two mega menus:

    1- One for “About us”, which I want to appear exactly below the “About us” menu item, perfectly aligned with it (not centered or offset).

    2- Another for “Solutions”, which I want to appear centered below the “Solutions” menu item (since that mega menu is wider).

    I’m using desktop-only Overlay Panels for these, and they are hidden on tablet and mobile using CSS, where I use a different menu layout.

    Could you please tell me the correct way (or CSS selectors / positioning method) to make:

    1- The “About us” mega menu appear exactly under the “About us” menu item.
    2- The “Solutions” mega menu appear centered under “Solutions.”

    Here are my setup details:
    Theme: GeneratePress Pro
    Builder: GenerateBlocks Pro
    Header: Built with a GP “Element” (Site Header > Navigation > Menu Container > Menu > Menu Item).
    Mega menus: Created in GenerateBlocks → Overlay Panels.
    Position to parent currently points to the navigation container (.gb-site-header), but I’d like to attach each panel directly to its specific menu item.

    Thank you so much for your help — I just need the right selector or setting so each mega menu aligns properly under its corresponding menu item in desktop view.

  • Ying
    November 3, 2025 at 3:07 pm

    Hi there,

    1.1 Set the overlay panel’s Position to Parent to .menu-item-462 instead of .gb-site-header. The .menu-item-462 is the about us menu item’s default class.

    You can also add a custom class to the menu item via appearance > menus, eg. about, so you can set the Position to Parent to .about.

    1.2 Set the overlay panel’s Placement to Bottom left.

    2.1 Same as 1.1, but you can use another custom class eg. .solutions for the solution menu item.

    2.2 Set the overlay panel’s Placement to Bottom center.

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