Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1368910

    I have a vertical menu enabled and wondering if I can have the submenu items expand/collapse on click. If it can’t be done natively, please let me know what php file I need to overwrite and I can figure it out. Thanks!

    #1369018

    Hey luismc83,
    Do you mean that you are using a header sidebar layout so the main menu is vertical in the sidebar?
    If so is the menu item with the sub-menu items also have an activate link or does it have no link?
    Typically menu items with a toggle on click interfere with the link of the parent, so you would want to have no link on the parent so your toggle doesn’t trigger the link target.

    Best regards,
    Mike

    #1369024

    Currently it has no link, it’s just a label for the submenu items. What I am trying to accomplish is:
    instead of show submenu on hover, show them on click. I would ultimately like the items to show underneath the parent item, instead of next to/over. I attached a screenshot, not sure if it makes more sense.

    https://coastal.hungrylemur.com/wp-content/uploads/Capture1.PNG

    #1369034

    Hi,
    Thanks for the screenshot, the following script and css will remove the hover effect of the sidebar menu and open and close the submenu items on click below the menu item.
    Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_sidebar_menu_open_on_click_script() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($){
      $(".menu-item-has-children").click(function() {
      	var clicks = $(this).data('clicks');
      if (clicks) {
      	$(this).removeClass('open');
      } else {
        $(this).addClass('open');
      }
      $(this).data("clicks", !clicks);
      });
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_sidebar_menu_open_on_click_script');

    Add this CSS to Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #avia-menu.av-main-nav .menu-item-has-children:hover ul.sub-menu {
    	opacity: 0 !important;
        visibility: hidden !important;
    }
    #avia-menu.av-main-nav ul.sub-menu {
        top: unset;
        left: unset;
        position: relative;
    }
    #avia-menu.av-main-nav .menu-item-has-children ul.sub-menu li {
    	display: none;
    }
    #avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu li {
    	display: block;
    }
    #avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu {
    	opacity: 1 !important;
        visibility: visible !important;
    }
    #avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu li:last-child {
        padding-bottom: 25px;
    }

    After applying the css, please clear your browser cache and check.
    The expected results:
    2022-10-16_019.png
    Please ensure to copy the code from the forum and not an email notification.

    Best regards,
    Mike

    #1369185

    Thank you. Worked like a charm :)

    #1369208

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    #1371998

    Sorry to revive an old thread, but wondering if we can enhance this slightly. The submenu opens as intended, but I would like it to stay open when you navigate to the page. For example, referring to the screenshot above, if I click “Employee Handbook”, the behavior is as follows:
    Currently: The user is navigated to the page, but the submenu items close/disappear.
    Expected: The user is navigated to the page and the submenu item “Employee Handbook” would stay open and selected.

    How difficult is this behavior to achieve?

    #1372064

    Hi,
    I’m not sure how easily this could be done, it would require some custom javascript to open the sub-menu after the page loads and it would probably look slightly animated.
    I think the javascript would need to specify each page, this there a lot of pages?
    The link to your site is not working anymore, do you have a new URL?

    Best regards,
    Mike

    #1372333

    Yeah, the animation is fine, we currently have that on the asp .net version of the site (migrating to wp) and it works ok.
    It will probably be < 10 pages. I don’t mind specifying each page, I can figure out a way to make it better once we get it working :)
    I put the site back online.

    #1372424

    Hi,
    Thanks for the login but the link to your site is not working, do you have a new url?

    Best regards,
    Mike

    #1374719

    Ah, sorry about that, I moved it to an intranet so it’s not accessible. Disregard the previous question, I was hoping maybe the alternative is easier…
    I have the sub-menu items opening in new tabs but am wondering if there’s a way to keep the parent menu item open (prevent it from collapsing) when the user clicks submenu items?

    Basically whenever any of the items marked in red are clicked, the drawer stays open?

    https://calilarchitects.com/wp-content/ss.png

    If you need access, I can copy the site to a public location.

    #1374770

    Hi,
    Maybe we can apply css for the sub-menu page to show the parent menu item open/expanded.
    So it’s not based on clicking the menu, it’s about landing on the page.
    Please copy the site to a public location so we can test.

    Best regards,
    Mike

    #1375298

    created a new wp instance and copied the main functionality over that we need…

    If you click “Documentation”, you see the submenu items appear. What I would like to happen is suppose you click “another page”, I was hoping we can make the Documentation drawer stay open. Right now we open to a new tab so you’d have to actually go back to previous tab, but if you press ctrl + left mouse click you stay on the page and you can see what I mean.

    I hope that makes sense. Thanks for the help.

    #1375342

    Hi,
    Thanks for the link, so to make the menu item “documentation” show open whenever the page “another page” is opened try this css:

    #top.page-id-21 #avia-menu.av-main-nav #menu-item-29.menu-item-has-children ul.sub-menu li {
        display: block;
    }
    #top.page-id-21 #avia-menu.av-main-nav #menu-item-29.menu-item-has-children ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }

    To apply this to other pages and menu item you would change the page class (page-id-21) and the menu ID (menu-item-29) to your new page and menu item.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1376338

    Hey Mike,

    I appreciate the help. That didn’t appear to work for me…

    #1376407

    Hi,
    Thanks for the feedback but when I check your page /another-page/ the css forces the menu to be open:
    2022-12-16_005.jpeg
    compared the /about-us/ page that the css doesn’t work on which shows the menu closed:
    2022-12-16_006.jpeg
    If you are not seeing this try clearing your browser cache.

    Best regards,
    Mike

    #1376651

    I see…Sorry, that’s helpful, but what I was actually hoping for was the original page to keep the nav menu open.
    For example:
    1. Navigate to the home page.
    2. CONTROL + Left click on Documentation -> Another Page
    3. Desired behavior is to have the menu item Documentation -> Another Page stay open.

    Is this possible?

    #1376718

    Hi,
    Unfortunately not, this circles back to the first part of this thread, perhaps someone with better javascript abilities could write this for you.
    When you asked for the specific page to show the menu open this seemed feasible.

    Best regards,
    Mike

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