Title: change menu dropdown button
Last modified: August 30, 2016

---

# change menu dropdown button

 *  Resolved [filzer](https://wordpress.org/support/users/filzer/)
 * (@filzer)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/)
 * i have a menu like this: [ screenshot ](http://imgur.com/cmA6bLa) (in a child
   theme)
 * as the item “paint” has no content (it is no page, just a link to nowhere), it
   would be better if a click on the name would also toggle the dropdown.
 * so if i click on “paint” the same thing would happen than if i click on the dropdown
   button.
 * i tried to modify this line in the functions.js `container.find( '.menu-item-
   has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false"
   >' + screenReaderText.expand + '</button>' );` but could not find out how to 
   do it correctly.
 * the “paint” could ideally be the name of the button and no `<a>` element anymore.
 * i hope anyone understands what i am into 🙂 any help is very welcome!

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Loc_rabbirt](https://wordpress.org/support/users/loc_rabbirt/)
 * (@loc_rabbirt)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714858)
 * I think it will need customized and it cannot give with free support.
 *  Thread Starter [filzer](https://wordpress.org/support/users/filzer/)
 * (@filzer)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714880)
 * thank you for your answer, but i don’t understand: do you want to sell me a solution?
 *  [Loc_rabbirt](https://wordpress.org/support/users/loc_rabbirt/)
 * (@loc_rabbirt)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714884)
 * Contact me via: outsource[@]designerresource.org and I will do it for you with
   some little cost.
 *  [Sampression](https://wordpress.org/support/users/sampression/)
 * (@sampression)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714886)
 * 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
 *  Thread Starter [filzer](https://wordpress.org/support/users/filzer/)
 * (@filzer)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714889)
 * thank you for that [@sampression](https://wordpress.org/support/users/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="http://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="http://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="http://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="http://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="http://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="http://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 [http://tstaudt.net/portfolio/](http://tstaudt.net/portfolio/)
 * thanks in advance!
 *  [Sampression](https://wordpress.org/support/users/sampression/)
 * (@sampression)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714893)
 * 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
 *  [Sampression](https://wordpress.org/support/users/sampression/)
 * (@sampression)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714898)
 * 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
 *  Thread Starter [filzer](https://wordpress.org/support/users/filzer/)
 * (@filzer)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714902)
 * 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?
 *  [Sampression](https://wordpress.org/support/users/sampression/)
 * (@sampression)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714913)
 * 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
 *  Thread Starter [filzer](https://wordpress.org/support/users/filzer/)
 * (@filzer)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714927)
 * 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…!)
 *  [Sampression](https://wordpress.org/support/users/sampression/)
 * (@sampression)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714933)
 * Thank you,
    Sampression

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘change menu dropdown button’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/fifteen/2.1.9/screenshot.png)
 * Fifteen
 * [Support Threads](https://wordpress.org/support/theme/fifteen/)
 * [Active Topics](https://wordpress.org/support/theme/fifteen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/fifteen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/fifteen/reviews/)

 * 11 replies
 * 3 participants
 * Last reply from: [Sampression](https://wordpress.org/support/users/sampression/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/change-menu-dropdown-button/#post-6714933)
 * Status: resolved