WordPress Custom Menu (3rd Level Nesting Issue)

3 Views

I’ve ran into a problem using a custom WordPress menu that I can’t seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I’ve decided to see if anybody here on StackOverflow can help.

Please note: I would use a Walker function for this but I’m too far gone with the code right now and the way the design works I’m having to build the menu this way.

Read More

My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).

I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows 

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)

And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.

So it should work like so: 

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)
    Right Sidebar (Parent: Pages)
    Left Sidebar (Parent: Pages)
    Our Process (Parent: Pages)

And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can’t seem to fix it. I was going to post this on the WordPress based forum but it’s more of a PHP error than anything else.

Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png – as you see they’re separated from the <li>.

To replicate this what I’ve done is just created a menu structure in WordPress and used the code that’s in the snippet (basically I just pasted it into the index.php file) to show how it’s being represented.

I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.

Apologies for the links above, I would post them directly in (screenshots & code) but I didn’t want to take away from the actual problem.

If somebody does manage to provide me with the solution I’d be more than happy to buy you a virtual coffee or two!

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?

    Ex below would output the correct structure for you to theme as your screenshot if applied in your context?

    wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );

    Thanks.

  2. Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122. 

    echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";

    I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.

    Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.

  3. Hi There try this css code to create multiple Nested menu create.

    WP code for menu in header.php

    <nav class="photoshoot-menu">
   <?php wp_nav_menu(array('theme_location'  => 'primary','container' => ' ')); ?>
</nav>

    CSS Code Add in your style.

    .photoshoot-menu {
  float: right;
  width: auto;
  padding-left: 0px;
  padding-right: 0px;
}
.photoshoot-menu ul {
  padding-left: 0px;
  margin: 0px;
}
.photoshoot-menu > ul li {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  margin: 3px 2px;
  position: relative;
}
.photoshoot-menu > ul > li > a {
  color: #212121;
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #4f4f4f;
  border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
  background-color: #343434;
  color: #f45c06;
}
.photoshoot-menu ul ul {
  border-radius: 4px;
  border: 1px solid #4f4f4f;
  background-color: rgba(38, 38, 38, 0.95);
  opacity: 0;
  position: absolute;
  top: 42px;
  width: 100%;
  min-width: 170px;
  z-index: 1;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}
.photoshoot-menu ul ul li {
  width: 100%;
}
.photoshoot-menu ul ul li a {
  display: inline-block;
  line-height: 16px;
  padding: 5px;
  color: #FFF;
  width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
  color: #f45c06;
}
.photoshoot-menu ul ul ul {
  left: 99%;
  top: 0px;
}
    <nav class="photoshoot-menu">
  <ul class="menu" id="menu-all-pages">
    <li><a href="#">Home</a>
    </li>



    <li><a href="#">Level 1</a>
      <ul>
        <li><a href="#">Level 2</a>
          <ul>
            <li><a href="#">Level 3</a>
              <ul>
                <li><a href="#">Lorem Ipsum</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Sample Page</a>
    </li>
  </ul>
</nav>