Title: Dropdown Menu with Extra Code
Last modified: August 20, 2016

---

# Dropdown Menu with Extra Code

 *  Resolved [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * (@scottcarlton)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/)
 * I have been searching for a way to edit the code of my dropdown on wp_nav_menu.
   Below is what I am trying to do.
 *     ```
       <nav class="main">
           <div class"center">
              <ul>
               <li>Menu Item 1</li>
                    <ul>
                     <div class="center">
                      <li class="dropdown">dropdown menu 1</li>
                      <li class="dropdown">dropdown menu 1</li>
                    </div>
                    </ul>
               <li>Menu Item 2</li>
                    <ul>
                     <div class="center">
                      <li class="dropdown">dropdown menu 2</li>
                      <li class="dropdown">dropdown menu 2</li>
                    </div>
                    </ul>
            </ul> <!-- Close main ul -->
           <div> <!-- Close main center -->
       </nav>
       ```
   
 * The nav container and center div is easy, but getting the center div in the dropdown
   is the challenge. I have been looking at a walker class but was sure if this 
   is the right approach. I would like to do this without a plugin because of some
   of the custom coding. Has anyone else been able to do this? Thanks for any help!

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

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282030)
 * You can’t have any elements outside `<li>` elements within an unordered list.
   
   What functionality do you want the center `<div>` to do?
 *  Thread Starter [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * (@scottcarlton)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282032)
 * WOW that was quick. Thanks!
    I am trying to create a dropdown with a full-width
   background like [here](http://twitpic.com/bmme6x/full) using css. Have been working
   on it for sometime.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282035)
 * Use a Browser Inspector tool like Firebug or the developer tool built into Chrome
   to literally inspect how that website (linked) implements it.
 *  Thread Starter [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * (@scottcarlton)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282103)
 * I have been search through google and found that you can use the walker class
   for wp_nav_menu to change the out put of your HTML. I need to put the div center
   class between the ul and li to center the li because the ul is 100% width.
    Now
   it is just about finding out more about writing the walker class to change just
   my second level ul.
 *  Thread Starter [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * (@scottcarlton)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282104)
 * This walker did the trick with adding a wrapper to center the li’s for me but
   it also adds it to the child ul as well. So need to figure out how to stop it
   from repeating with each child ul.
 *     ```
       class Walker_dropdown extends Walker_Nav_Menu {
       	// Displays start of a level. E.g '<ul>'
       	// @see Walker::start_lvl()
       	function start_lvl(&$output, $depth=0, $args=array()) {
       		$output .= "\n<ul><div class=\"center960\">\n";
       	}
       	// Displays end of a level. E.g '</ul>'
       	// @see Walker::end_lvl()
       	function end_lvl(&$output, $depth=0, $args=array()) {
       		$output .= "<div></ul>\n";
       	}
       }
       ```
   
 *  Thread Starter [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * (@scottcarlton)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282105)
 * Problem Solved! This is how I did it. Using some code from Bootstrap_Walker for
   WordPress by George Huger. I hope this helps anyone else looking to do the same.
 *     ```
       class Walker_dropdown extends Walker_Nav_Menu {
       	function start_lvl(&$output, $depth)
               {
                   $indent = str_repeat("\t", $depth);
                   if ($depth == -1 || $depth == 0) {
                       $output .= "\n$indent<ul><div class=\"center960\">\n";
                   } else {
                       $output .= "\n$indent<ul>\n";
                   }
                   return;
               }
         function end_lvl(&$output, $depth)
               {
                   $indent = str_repeat("\t", $depth);
                   if ($depth == -1 || $depth == 0) {
                       $output .= "\n$indent</div></ul>\n";
                   } else {
                       $output .= "\n$indent</ul>\n";
                   }
                   return;
               }
       }
       ```
   

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

The topic ‘Dropdown Menu with Extra Code’ is closed to new replies.

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [wp_nav_menu()](https://wordpress.org/support/topic-tag/wp_nav_menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [scottcarlton](https://wordpress.org/support/users/scottcarlton/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/dropdown-menu-with-extra-code/#post-3282105)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics