WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Dropdown Menu with Extra Code (7 posts)

  1. scottcarlton
    Member
    Posted 1 year ago #

    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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can't have any elements outside <li> elements within an unordered list.
    What functionality do you want the center <div> to do?

  3. scottcarlton
    Member
    Posted 1 year ago #

    WOW that was quick. Thanks!
    I am trying to create a dropdown with a full-width background like here using css. Have been working on it for sometime.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use a Browser Inspector tool like Firebug or the developer tool built into Chrome to literally inspect how that website (linked) implements it.

  5. scottcarlton
    Member
    Posted 1 year ago #

    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.

  6. scottcarlton
    Member
    Posted 1 year ago #

    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";
    	}
    }
  7. scottcarlton
    Member
    Posted 1 year ago #

    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;
            }
    }

Topic Closed

This topic has been closed to new replies.

About this Topic