change menu dropdown button

I think it will need customized and it cannot give with free support.

thank you for your answer, but i don’t understand: do you want to sell me a solution?

Contact me via: outsource[@]designerresource.org and I will do it for you with some little cost.

Pleas change this code
.menu-item-has-children > a
to
.menu-item-has-children > a[href='#']

You have to add the code as per the toggle function.
If you get confused please provide us the menu code.

Thanks,
Sampression

thank you for that @sampression! but it won’t work, the problem is that the menu item “paint” is not part of the toggle button.

the .js code obviously inserts it’s <button> tag after the <a> (for the menu item).

if i could remove the <a>paint</a> and replace it with <button>paint</button> i think this should work.

here the HTML output:

<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-152">
<a>art</a>
<button class="dropdown-toggle toggle-on" aria-expanded="true"><span class="screen-reader-text">Untermenü verbergen</span></button>
<ul class="sub-menu toggled-on">
	<li id="menu-item-137" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-137"><a>paint</a><button class="dropdown-toggle toggle-on" aria-expanded="true"><span class="screen-reader-text">Untermenü verbergen</span></button>
	<ul class="sub-menu toggled-on">
		<li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129"><a href="https://tstaudt.net/portfolio/paint-1/">paint 1</a></li>
		<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-144"><a href="https://tstaudt.net/portfolio/paint-2/">paint 2</a></li>
		<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="https://tstaudt.net/portfolio/paint-3/">paint 3</a></li>
	</ul>
</li>
	<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="https://tstaudt.net/portfolio/kunst/print-2/">print</a></li>
	<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="https://tstaudt.net/portfolio/kunst/photo/">photo</a></li>
	<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="https://tstaudt.net/portfolio/kunst/paper/">paper</a></li>
</ul>
</li>

what part of code of the menu do you need? it is the standard fifteen theme menu.

the site i am working on (only the menu atm) is https://tstaudt.net/portfolio/

thanks in advance!

Provide # link to the <a>paint</a>
Eg. <a href="#">paint</a>
Form the backend of the wordpress

and add this

jQuery("li.menu-item-has-children > a[href='#']").on('click', function() {
            jQuery('.submenu').slideToggle('slow');
        });

Or you can just add this code

jQuery("li.menu-item-has-children > a").on('click', function() {
            jQuery('.submenu').slideToggle('slow');
        });

Thanks,
Sampression

If you have herf=”some link” inside a tag then the browser recognize as the link tag and if you don’t have href=”some link ” inside the a tag browser render it as a general tag (but it is not consider as semantic). so, if you are providing href=”some link” then use first code instead you can use second code.

Thanks,
Sampression

Okay, i have a <a href="#">paint</a> link now. but i don’t know where to add the above jQuery code. I added it in the functions.js (which is copied from the original fifteen theme into my child theme folder) but there happens nothing.

i really appreciate your help! as i understand it is your idea to add another toggle to the link, so there will be one toggle with the button and another with the link. will they sync as well?

Add this code

jQuery("li.menu-item-has-children a").on('click', function() {
            jQuery(this).siblings("ul").toggleClass('toggled-on');
        });

Above
})(jQuery);

In function.js file.

Thanks,
Sampression

YES Sampression! Thank you very much, this did it! Very cool! (and so nice there are still people who try and help without wanting money…!)

Thank you,
Sampression