Adding Drop Down Menu Sidebar

Home Forums Premium WordPress Themes Seasonal Pro Adding Drop Down Menu Sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #4238
    Zigmund Reichenbach
    Participant

    I’d like to add a drop down menu to one of items the sidebar.

    How do you do this in WordPress?

    #4239
    ShapedPixels
    Keymaster

    First thing to note is that the menu in Seasonal Pro is a “toggle” menu which means for any submenu items (links), your parent menu item needs to be a blank link. This is done by adding # in where the URL link would go in.

    Note sure if you read this tutorial, but this gives an introduction to this kind of menu:

    An introduction to the Seasonal Pro Menu

    Then, to create submenus, you drag your pages, categories, or even custom Links into your menu and you can move them around.

    This WordPress tutorial is a good starting point for menus in general and making submenus:

    https://codex.wordpress.org/WordPress_Menu_User_Guide

    #11891
    Arno
    Participant

    I am experiencing the same problem. The theme manual does not seem accurate in my case. As I wrote on another thread, the only way to reveal the submenu is to click on the small triangle. Clicking on the menu title either opens a page or does not open anything in case the blank link # is used.

    thanks.

    #12085
    Shahrzaad Parekh
    Participant

    I’m having the same issue. In fact, the official demo site also demonstrates the same behaviour. Clicking on any of the FEATURES / PAGES / WORDPRESS titles in the sidebar does not expand the sub-menu, however, clicking on the arrow does expand the sub-menu.

    This behaviour has been checked on Desktop versions of Chrome, Firefox and Opera and on Android versions of Firefox and Chrome.

    #12088
    Bidur
    Keymaster

    In this theme menu is build to work on arrow chick only. So if you also want to show sub menu on clicking menu title you have to add following line of js code in functions.js file.

    $navMenu.find('.menu-item-has-children > a').on( 'click', function(e) {
              //e.preventDefault();
    
              var item = $(this),
                  itemSub = item.next().next('.sub-menu'),
                  parentSubs = item.closest('.menu-item-parent').find('.sub-menu');
              
              $navMenu.find('.sub-menu').not(parentSubs).slideUp(250);
              itemSub.slideToggle(250);
            });
            
    #12094
    Shahrzaad Parekh
    Participant

    @Bidur – But that’s precisely the functionality that you have described at https://www.shapedpixels.com/premium-theme-tutorials/setup-seasonal-pro/an-introduction-to-the-seasonal-pro-menu/

    That, out of the box, clicking on the menu title should expand/collapse the menu and not just clicking the drop-down arrow. Having to modify a core file in order to obtain the default functionality seems to defeat the purpose, doesn’t it? I’d suggest you either implement this functionality (maybe as an option) or re-edit the official documentation.

    #12108
    Bidur
    Keymaster

    Yes if you add above code it will work same as you said. Sub-menu will also hide and show when clicking to menu parent title.

    Thanks

    #12111
    Shahrzaad Parekh
    Participant

    As recommended elsewhere, I’ve installed the Seasonal Pro child theme so future updates to the theme don’t change customizations made later on. Can you please guide me as to whether I need to copy the original functions.js file (or the entire folder too) into a similar path /themes/seasonalpro-child/js or do I make the changes in the original parent folder?

    Also, where precisely in the functions.js file do I insert the above code block?

    Thank you for your help.

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