Docs

[tomaspernek]

Hi there!

I have a page where I have a menu in the sidebar. On some of them I have subpages and I would like to have a dropdown functionality similar to what you have on the main meny. I have searched the forum and found css that makes the subpages appear on hover.

——–

.widget_nav_menu ul li ul, .widget_nav_menu ul li .sub-menu, .widget_meta ul li ul, .widget_meta ul li .sub-menu, .widget_pages ul li ul, .widget_pages ul li .sub-menu {
display:none }
.widget_nav_menu ul li:hover ul, .widget_nav_menu ul li:hover .sub-menu, .widget_meta ul li:hover ul, .widget_meta ul li:hover .sub-menu, .widget_pages ul li:hover ul, .widget_pages ul li:hover .sub-menu {
display:block;
}

——-

I would like to have some kind of indicator that states that there is subpages (like in the main menu)…and most of all I would like for them to appear when I click on the menu item. Like they do on the mobile menu.

Is this possible?

Best regards!

/Tomas

[Rupok]

Hey Tomas,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[tomaspernek]

This reply has been marked as private.

[Lely]

Hi Tomas,

Thanks you for the credentials.
Please add the following custom CSS:

.x-sidebar.left .widget_nav_menu li.menu-item-has-children >a:after {
    content: "\f103";
    margin-left: 0.35em;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.x-sidebar.left .widget_nav_menu li.menu-item-has-children ul.sub-menu {
    display: none;
}

Then add the following custom Javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(function($) {
    $('.x-sidebar.left .widget_nav_menu li.menu-item-has-children > a').on( "click", function(e) {
    e.preventDefault();
  $(this).next().slideToggle(400);

});
});

Hope this helps.

[tomaspernek]

Wow, thanks a lot for the super fast response! This worked out perfectly!

Best!

/Tomas

[Lely]

You’re welcome Tomas!

Cheers!

[tomaspernek]

Hello again!

I just realized that the links in the sidebar menu that contains dropdowns have one “issue”

And that is that they are not clickable in the sense that on click you only get the sub items.
Is it possible to get these on hover instead and when clicking you go to the page?

Thanks and best!

/Tomas

[Rupok]

Hi Tomas,

It’s because we have implemented this on click event so it will be just used as parent menu and not clickable itself. So let’s just use this to open the menu. It won’t be easy to implement this on hover and you might get unwanted behavior.

Hope this makes sense.

[Author]

Posts