How to set panel width = to menu bar hover background width

  • Resolved mstephens268

    (@mstephens268)


    6 years, 10 months ago

    I am trying to make my dropdown panel width equal to the width of my main menu bar. When I hover over the leftmost menu item, I want the menu item background to align with the left edge of the panel background (which both appear only on hover). Likewise, when I hover over the rightmost menu item, I want that item’s background to align with the right edge of the panel background.

    Currently, I’m only able to get the left backgrounds to align. (My menu bar items are left-aligned.) When I try center-aligning the menu bar items, neither background edge aligns with the panel.

    I’ve also tried tweaking the panel width % value, but it doesn’t give me the clean alignment on the right that I’m looking for.

    Can you all help with this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi mstephens,

    I think I can probably help, but please can you post a link so I can better understand what you want to do?

    I suspect you’ll need to use a jQuery selector to set the Panel Width, there’s some information on that here:

    https://www.megamenu.com/documentation/adjust-sub-menu-width/

    Regards,
    Tom

    Thread Starter mstephens268

    (@mstephens268)

    Here’s the link to site (build in progress). I’d like it to perform like the one on this site.

    Thread Starter mstephens268

    (@mstephens268)

    So, I had seen the article you linked to previously when I was researching. I want the panel width to = 100% of the menu bar width, assuming that the menu bar is (or can be) bound by the left and right most edges of the background which is highlighted on hover. If there are any adjustments I can make to the menu bar in order to make it = the width of the panel (as opposed to adjusting the panel width), I’d be open to that option as well.

    Thanks for your help.

    • This reply was modified 6 years, 10 months ago by mstephens268.
    Plugin Author megamenu

    (@megamenu)

    Hi mstephens,

    Thanks for the links.

    The menu bar (even though you can’t see it because it has a transparent background) expands to fill the width of the area it is placed within – and that is determined by your theme. In your case, that area is here:

    https://screencast.com/t/qxxaHQRa

    So you need to stop the menu from filling that width, and only take up the space it needs.

    Please go to Mega Menu > Menu Themes > Custom Styling and add the following:

    @include desktop {
    #{$wrap} {
        float: left;
    }
}

    Then set the Panel Width (Outer) to 100% (it is set to 90% at the moment).

    Regards,
    Tom

    Thread Starter mstephens268

    (@mstephens268)

    That did the trick! Thanks for the help!

    • This reply was modified 6 years, 10 months ago by mstephens268.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to set panel width = to menu bar hover background width’ is closed to new replies.