0

I'm trying to edit the toggle menu so that instead of having to click on the icon near the menu, the menu would open up by clicking on the words instead. How to do this? I understood how to remove the icons, yet I'm not sure how to make the titles clickable instead of being a # link.

the website is: http://maayanboni.com

Anyone can help by any chance? that would be amazing

thank you!

Improve this question

1 Answer 1

Reset to default
0

Solution One, which is also the simplest, would be to postion the button over the text. Then you could click anywhere within the link to open the menu. This assumes you don't actually ever want to go to the top level page.

In you styles.css, add width: 100% !important; and text-align: right; to your .dropdown-toggle class. so it would look like this...

.dropdown-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    height: 42px;
    padding: 0;
    position: absolute;
    text-transform: lowercase;
    top: 3px;
    right: 0;
    width: 100% !important;
    text-align: right;
}

Solution Two (Parents NOT Linkable), Use the following code, it's a simple script that does what your asking. Note: you should remove the script that you are currently using.

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {
            jQuery(this).addClass('toggled')
            if (jQuery(this).hasClass('toggled')) {
                jQuery(this).children('ul').toggle();
            }

            return false;

        });
    }

});

Solution Three (Parents Linkable)

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {            
            if (jQuery(this).hasClass('toggled')) {
                    jQuery(this).removeClass('toggled');
                jQuery(this).children('ul').toggle();
            }else{
                    jQuery(this).addClass('toggled');
                    jQuery(this).children('ul').toggle();
                return false;
            }
        });
    }

});
Improve this answer
6
  • Thank you!! I'm trying the second method and it works great, but then I cannot click on the "children links", this is the part that I'm removing:
    – mademoiselleflo
    Commented Dec 7, 2018 at 20:01
  • container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); // Toggle buttons and submenu items with active children menu items. container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' ); container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
    – mademoiselleflo
    Commented Dec 7, 2018 at 20:05
  • I updated the answer to include a solution where the parents are linkable
    – RiddleMeThis
    Commented Dec 7, 2018 at 20:54
  • perfect, many thanks, this is so kind of you. is there also a way to keep the clicked section open after clicking on a specific page?
    – mademoiselleflo
    Commented Dec 7, 2018 at 21:12
  • Keep the menu open when you go to a new page? That is beyond the scope of this question. I would mark this as answered and start a new question. You can do that with CSS though since WP is adding a "current-menu-parent" class to your active list item.
    – RiddleMeThis
    Commented Dec 7, 2018 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.