Flyout menu

  • Resolved Manish S

    (@shahmanish877)


    3 years, 4 months ago

    I want to create flyout menu simple for sub-menu with the 2 level sub-menu are shown below the parent menu instead of open in the right side.

    I used following CSS but due to z-index, the dropdown open even if we hove mouse below the menu bar.

    .main-nav-menu #mega-menu-wrap-main-menu #mega-menu-main-menu .mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu{
	position: inherit;
	left: 0;
	opacity: 1;
	visibility: visible;
	display: block;
	transform: translate(0, 0);
}

    What I want to create – https://nimb.ws/PABdV3

    I tried to use grid layout with 1 column but the width is full as I have set the width equal to body.

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

    (@megamenu)

    3 years, 4 months ago

    Hi shahmanish877,

    The flyout menus are designed to show one level at a time, so you will be fighting the JavaScript and CSS to change that behaviour. As you’ve suggested, using the Grid Layout would be better. You can make it a narrower for just one sub menu using Custom Item Styling in Pro:

    https://www.megamenu.com/documentation/item-styling/

    Regards,
    Tom

    Thread Starter Manish S

    (@shahmanish877)

    3 years, 4 months ago

    Thank you for the reply. The website is for my client and he is using the free plugin, not the Pro one so I have the option to use CSS only.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Flyout menu’ is closed to new replies.

Tags