Submenu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #11874
    Arno
    Participant

    Hi there,

    I have seen a website using seasonal pro where submenus show up when the main menu text is clicked – instead of clicking on the arrow.
    On my developing website the only way to open a submenu is by clicking the arrow.

    How can I change that?
    thanks

    #11888
    Arno
    Participant

    Hi guys, could you please look into that and give me an answer?

    If I have content in submenus I need to make sure that people will understand that the submenus exist. The small triangle is beautiful but some people might miss it.
    Clicking on the main menu text is a much safer option. The people who own this page did it, so it should be possible: http://shen.gr

    #11890
    Arno
    Participant

    I searched all the related questions in the forum but could not find the answer. I created a blank custom link using # but still the submenus do not appear.
    The only way for them to appear is by pressing the arrow.

    Have I missed something? I checked the theme manual but could not find anything.

    #11894
    Bidur
    Keymaster

    Hi Arno,

    The Menu with the sub-menu should be linked to #. Then only it will work as in demo. If you are getting same issue please send us your site url, There may be js error.

    Thanks

    #11897
    Bidur
    Keymaster

    To enlarge and change the color you can use following css.

    .primary-navigation .menu-item-has-children > a::after {
    margin-top: -11px;
    font-size: 2rem;
    color: red !important;
    }

    Thanks

    #11903
    Arno
    Participant

    Hello Bidur, the site is in development mode. I linked the menu title to # but nothing happens, that is the submenu does not appear when clicked.

    #11959
    Arno
    Participant

    My site is live now, can you contact me so that i can send it to you. don’t want to post publicly. thanks

    #11964
    Bidur
    Keymaster

    Hi Aron,

    If you put # link in parent menu, then it work exactly as in demo http://demo.shapedpixels.com/seasonal-pro. It is show and hide when clicked in arrow. If it is not working like this please send me your site url.

    #11968
    Arno
    Participant

    Hello Bidur, is it possible to make it work like on this website – http://www.shen.gr ?

    The submenu works when I click both the arrow AND the text of the menu.

    thank you

    #12035
    Bidur
    Keymaster

    Hi Arno,

    To make menu behave same like the website you have send please add following js in your Seasonal pro child theme.

    $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);
    });

    Thanks

    #12037
    Arno
    Participant

    Many thanks Bidur.

    I do not use a child theme however. In which file can I put it on the main theme?

    #12047
    Bidur
    Keymaster

    Hi Aron,

    Yes you can also put this in parent theme but it will override when you update you theme. So It will be better if you put in child theme. If you want to put in parent theme edit the functions.js file which is inside js folder. You can put code like below.

    
    /**
     * Theme functions file.
     */
    (function($) {
      "use strict";
    
      $(document).ready(function($){
    
        var $body = $('body');
     
        
        // Navigation toggle buttons
        $('.nav-toggle').on( 'click', function() {
          $body.toggleClass('nav-open');
        });
        
        
        // Primary Navigation
        var $navMenu = $('.primary-navigation .nav-menu');
        
        if( $navMenu.length ) {
          $navMenu.children('li').addClass('menu-item-parent');
          
    	  
          $navMenu.find('.menu-item-has-children > a').after('<i class="fa fa-angle-down hchildren" aria-hidden="true"></i>');
    	  $navMenu.find('.hchildren').on( 'click', function(e) {
            //e.preventDefault();
            var item = $(this),
                itemSub = item.next('.sub-menu'),
                parentSubs = item.closest('.menu-item-parent').find('.sub-menu');
            
            $navMenu.find('.sub-menu').not(parentSubs).slideUp(250);
            itemSub.slideToggle(250);
          });
    
          $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);
            });
            
    
        }
        
        
      });
      
    })(jQuery);
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.