[RickHerroParticipant]

Hi Guys,

I’m using the Renew stack and I want to have the main navigation in the left sidebar. I’ve created a custom menu in a widget in the left sidebar and I would like to have the sub-menu items hidden until the mouse is hovered over the top level menu item. When hovered I would like the sub-menus then to pop out to the right of the top level item.

Some top level items have two levels of sub-menus items underneath.

I found the following two threads…

How to create drop-down Custom Menus

drop down sidebar menu

…which work to hide/show the sub-menus on hover however these make them drop down (expand/collapse, underneath) – I need them to pop out to the right with all the top levels staying static.

Is this achievable?

The site is currently showing a coming soon page so I will give you access in the message where I can mark it private.

[RickHerroParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.widget_nav_menu ul li{
    position: relative;
}

.widget_nav_menu ul li:hover .sub-menu{
   position: absolute;
   left: 100%;
   top: -1px;
   z-index: 100;

   background-color: #fff;
   min-width: 190px;

   box-shadow: 4px 3px 4px rgba(0,0,0,0.35);
}

We would loved to know if this has work for you. Thank you.

[RickHerroParticipant]

Thanks for reply however it didn’t work for me.

The example you’ve given above is exactly what I’m after but the code you’ve supplied isn’t doing it for me.

[RickHerroParticipant]

May I please add that, if it’s possible, I would only like the next level of subcategory to appear, not all levels (just like your example above) – if that makes sense.

[RickHerroParticipant]

What is currently on the website is the categories widget, in the sidebar – I have removed the custom menu for now. Alternatively, if we can make this same pop out happen with this categories widget, the problem would also be be solved.

[RickHerroParticipant]

The categories widget I refer to above is the “Product Categories”

[RadModerator]

Hi there,

That’s not possible with current widget, it’s not hierarchical. The structure is different from the previous one. Please switch to standard menu.

Thanks!

[RickHerroParticipant]

I’ve just discovered that I can move the navigation from the top to the side (in Customizer), which solves my problem – HOWEVER – I’ve just discovered a new problem.

I have installed and activated the plugin “ConvertPlug” and have a popup modal configured to appear on the home page but now the sub menu’s do not pop out anymore on the home page (they’re OK on other pages). When I de-activate ConvertPlug, the sub menus start working again.

Any suggestions?

[Rue NelModerator]

Hello There,

Have you tried using SuperFly menu? You can have a slidein or fixed sidebar menu. For more details about this plugin, please check out our knowledge base here: https://community.theme.co/kb/integrated-plugins-superfly/

Hope this helps.

[RickHerroParticipant]

Thanks for the heads up about SuperFly, however, I have the menu sorted now.

Can you help me with the conflict between ConvertPlug and the submenus not working?

[RadModerator]

Hi there,

Sub-menus are popping out correctly, you’ll have to hover over it or click the arrow down icon on mobile. Would you mind clarifying the issue you’re getting with ConvertPlug? Should it appear automatically or by the trigger? Because it never appears even on a desktop. Displaying it doesn’t make any difference.

Thanks!

[RickHerroParticipant]

It was working because i had the modal paused. I have now made the modal live. May i kindly ask you to have another look now please?

[Paul RModerator]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar-fixed-left .desktop li.menu-item-has-children:hover > .sub-menu {
    display:block !important;
}

Hope that helps

[RickHerroParticipant]

Thanks for that, it’s working, BUT, only for the first level of sub-menus. As soon as I try to go to the second level of sub-menu, all sub-menus disappear.

There are several levels of sub-menu – some have 5.

[Author]

Posts