Title: Customizing WordPress Submenu?
Last modified: August 20, 2016

---

# Customizing WordPress Submenu?

 *  [galanx](https://wordpress.org/support/users/galanx/)
 * (@galanx)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/)
 * Hello everyone,
 * I’d like to know of a way to un-nest the default wordpress submenu from the parent
   menu but still be able to maintain child-parent relationship.
 * The reason I want to do this is because I want to make my submenu appear independently
   wherever I want it to, and unfortunately I can not achieve this while the submenu
   is nested inside the parent.
 * Is there a way to access the WordPress raw html? Is this even possible?
 * Thanks for your help

Viewing 12 replies - 1 through 12 (of 12 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/customizing-wordpress-submenu/#post-3304083)
 * Can you not apply a `display: block;` style to your submenu?
 *  Thread Starter [galanx](https://wordpress.org/support/users/galanx/)
 * (@galanx)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304084)
 * I can, but I want to achieve this effect like here: [http://www.louvre.fr/en](http://www.louvre.fr/en)
 * without affecting the width of the parent links…
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304085)
 * Can you describe what on that page, you want?
 *  Thread Starter [galanx](https://wordpress.org/support/users/galanx/)
 * (@galanx)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304086)
 * I want each submenu to appear independently without following the position of
   the parent. In other words, I want all submenus to appear on one spot, not right
   beneath their parent.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304087)
 * Are you working on a website where you want this implemented? If so, can you 
   link that website?
 *  Thread Starter [galanx](https://wordpress.org/support/users/galanx/)
 * (@galanx)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304089)
 * I am working on this one: vblok.com
 * But I have only the default submenus, what I want is the effect of [http://www.louvre.fr/en](http://www.louvre.fr/en)
 * However currently I am trying to achieve this offline, but I can;t because of
   the nested menu structure. The submenu always appears under their parent, not
   where I want it to…
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304091)
 * On your vblok website, I added this code (temporarily);
 *     ```
       .main-navigation li ul {
        display: block;
       }
       ```
   
 * And achieved this [http://awesomescreenshot.com/0adqsmx98](http://awesomescreenshot.com/0adqsmx98).
   
   Where did you get that theme from, by the way?
 *  Thread Starter [galanx](https://wordpress.org/support/users/galanx/)
 * (@galanx)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304092)
 * I know I tried display:block, but the point is to achieve the slideDown and push
   effect, where the submenu pushes everything down. I achieved this too, where 
   the submenu pushes everything, but all I want is that the submenu appears on 
   the middle, not right under the parent when a parent is clicked.
 * To make it clear, each submenu should appear at the same spot when their parent
   is clicked, for example, first parent is clicked, the first parent submenu appears,
   then second parent clicked, first parent menu disappears and second one appears
   on the same spot where the first one was.
 * I hope this didn’t confuse you, if it did then just look at [http://www.louvre.fr/en](http://www.louvre.fr/en),
   this is what I want to achieve.
 * About the theme, a friend of mine made it.
 *  [Arathol](https://wordpress.org/support/users/arathol/)
 * (@arathol)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304176)
 * I am looking for the same end result with the sub menu’s being separated.
 * Galanx: I think I know what you are saying and i have achieved what you want 
   using the menus the way they are. I position each sub menu using position:absolute
   and left align it and display and hide when needed.
 * Look here for some examples [http://www.fin-ex.com/v2](http://www.fin-ex.com/v2)
 * The problem i have is that I am making a mobile friendly site and because the
   elements are positioned absolutely, they do not drop below each other when the
   screen is made narrow.
 * So for example. at the moment i have this
 *     ```
       <ul class="menu">
           <li>link 1
               <ul class="submenu-1">
                   <li>submenu-1 link 1</li>
                   <li>submenu-1 link 2</li>
               </ul>
           </li>
           <li>link 2</li>
           <li>link 3
               <ul class="submenu-2">
                   <li>submenu-2 link 1</li>
                   <li>submenu-2 link 2</li>
               </ul>
           </li>
       </ul>
       ```
   
 * **but what I really want is**
 *     ```
       <ul class="menu">
           <li>link 1</li>
           <li>link 2</li>
           <li>link 3</li>
       </ul>
   
       <ul class="submenu-1">
           <li>submenu-1 link 1</li>
           <li>submenu-1 link 2</li>
       </ul>
   
       <ul class="submenu-2">
           <li>submenu-2 link 1</li>
           <li>submenu-2 link 2</li>
       </li>
       ```
   
 * this way I don’t have to use position: absolute and I can just hide and display
   when I want and they will just stack below each other the correct way.
 * Everybody is talking about setting up a custom “walker” or something like that
   but I haven’t figured it out yet. perhaps someone could help us out here
 *  [ronangelo](https://wordpress.org/support/users/ronangelo/)
 * (@ronangelo)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304177)
 * You can make the sub-menu appear wherever you want by adding this to the sub-
   menu class:
 *     ```
       position: absolute;
       ```
   
 * then the values for x & y
 *     ```
       top: 0px
       left: 0px
       ```
   
 * —- edit —-
    oops I didn’t read the part where you indicate that you don’t want
   to use position: absolute. But why not?
 *  [Arathol](https://wordpress.org/support/users/arathol/)
 * (@arathol)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304184)
 * The reason being is that I am building a mobile friendly site. I want the menus
   to stack on top of each other. if i use absolute positioning they are fixed to
   a certain height from the top.
 * Take the site I posted as example. make your browser screen narrow and you will
   see that the menu option for the 1st level menu drop down behind the second level.
   
   if they weren’t positioned absolutely then it would just push the 2nd and 3rd
   level menu down perfectly.
 * — Side Note —
    I will eventually make a more mobile friendly menu but for now
   this is the only option for me.
 *  [Olly – OWMC](https://wordpress.org/support/users/olly-owmc/)
 * (@olly-owmc)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304267)
 * [@galanx](https://wordpress.org/support/users/galanx/)
 * hope this is what you were looking for. instead of using the default wordpress
   menu call use this:
 *     ```
       <ul id="nav">
       <?php wp_list_pages('title_li=&depth=1'); ?>
       </ul>  
   
       <?php if($post->post_parent)
       $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
       $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");  
   
       if ($children && is_page()) { ?>
       <ul id="subnav">
       <?php echo $children; ?>
       </ul>
       <?php } else { ?>
       <?php } ?>
       ```
   
 * You can order the pages according to “menu-order” i believe.
 * the kind of menu used by the Louvre (you linked to) is really popular with touch
   screens. but implementing this kind of interface with wordpress is still a pain.
   i’ve been googling for 2 days straight. on the verge of paying someone for help.
 * hope fully the code i’ve posted here will help me out.

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

The topic ‘Customizing WordPress Submenu?’ is closed to new replies.

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [nav](https://wordpress.org/support/topic-tag/nav/)
 * [submenu](https://wordpress.org/support/topic-tag/submenu/)

 * 12 replies
 * 5 participants
 * Last reply from: [Olly – OWMC](https://wordpress.org/support/users/olly-owmc/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/customizing-wordpress-submenu/#post-3304267)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics