Title: Responsive Multi-level Navigation
Last modified: February 23, 2024

---

# Responsive Multi-level Navigation

 *  [mikehenden](https://wordpress.org/support/users/mikehenden/)
 * (@mikehenden)
 * [2 years, 3 months ago](https://wordpress.org/support/topic/responsive-muti-level-navigation/)
 * **Kind of hard to describe but… **
 * I’m building a site that has a two-level navigation structure. The first level
   is a ‘section’, the submenus are ‘topics’ within that ‘section’. To clarify, 
   the ‘section’ items in the navigation don’t have any content, they are simply
   a ‘section’ that groups related content together. Clear as mud?
 * So here’s the thing — in desktop mode everything works fine, click on a ‘section’
   and the subnav with related ‘topics’ opens out. Cool.
 * Mobile, however, is a different story. Initial view shows the ‘Menu’ button, 
   click on that and EVERYTHING falls out — a big long list of ‘sections’ with all
   their related ‘topics’ displayed. The result is a big, long navigation list that
   requires endless scrolling before you actually get to see the page…
 * So how do I get the ‘sections’ to act like buttons in mobile view, that you click
   to open the section and see related ‘topics’?
 * Before you ask, yes, I’ve tried various plugins but these compromise the design
   and UX of the site. Not happy with the end result.
 * I did find this page: [https://awhitepixel.com/wordpress-menu-walkers-tutorial/](https://awhitepixel.com/wordpress-menu-walkers-tutorial/)
 * I think that the answer is here somewhere, and I will be able to make the ‘event
   listener’ on parent element of ‘submenu’ act like the ‘event listener’ on ‘site
   navigation’ that produces the ‘Menu’ button? I have ‘menu walker’ loaded but 
   not enabled. I’m not sure how to instruct it. I currently have the following 
   loaded:
 *     ```wp-block-code
       class AWP_Menu_Walker extends Walker_Nav_Menu {
           	function start_el(&$output, $item, $depth=0, $args=[], $id=0) {
           		$output .= "<li class='" .  implode(" ", $item->classes) . "'>";
   
           		if ($item->url && $item->url != '#') {
           			$output .= '<a href="' . $item->url . '">';
           		} else {
           			$output .= '<span>';
           		}
   
           		$output .= $item->title;
   
           		if ($item->url && $item->url != '#') {
           			$output .= '</a>';
           		} else {
           			$output .= '</span>';
           		}
   
           		if ($args->walker->has_children) {
           			$output .= '<i class="caret fa fa-angle-down"></i>';
           		}
           	}
           };
       ```
   
 * This does nothing at all — doesn’t even produce the promised ‘caret’ much less
   give me a button to work with…
 * Can anybody shed a bit of light here??
    -  This topic was modified 2 years, 3 months ago by [mikehenden](https://wordpress.org/support/users/mikehenden/).

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

 *  [VEFA AKIN AKTANSEL](https://wordpress.org/support/users/vefaakinaktansel/)
 * (@vefaakinaktansel)
 * [2 years, 3 months ago](https://wordpress.org/support/topic/responsive-muti-level-navigation/#post-17448778)
 * I am not sure if my idea works for you:
 * you can add extra css code – at the end of style file of course – that makes 
   sections appear like buttons, like adding extra classes and then adding button
   styles for these new classes which makes your sections look like buttons now!
 * and lastly all you need to do to add the necessary media query rule for mobile
   view to activate your new styles for the sections.
 * No PHP,only CSS! Do you think can this work?
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [2 years, 3 months ago](https://wordpress.org/support/topic/responsive-muti-level-navigation/#post-17449664)
 * FYI, the menu walker only manages the HTML that is output. It needs to output
   all items. What’s visible for any given situation is managed with CSS. Most theme’s
   I’ve seen will collapse mobile menus so that only the top level items are initially
   visible and one has to tap an item to see the related sub-menu. Would you consider
   changing to a theme whose menus behave as you wish?
 * Or maybe it’s something your theme’s author might want to correct for all users.
   Perhaps try contacting them through your theme’s dedicated support channel.
 * Like vefaakinaktansel had suggested, you could apply overriding CSS to accomplish
   what you want. The one thing the menu walker might help with is if you need certain
   additional classes added to certain items so that the correct CSS selectors can
   be used.
 *  Thread Starter [mikehenden](https://wordpress.org/support/users/mikehenden/)
 * (@mikehenden)
 * [2 years, 3 months ago](https://wordpress.org/support/topic/responsive-muti-level-navigation/#post-17449874)
 * Thanks for feedback guys. Yes, it’s possible to do this in CSS only…
 *     ```wp-block-code
       /* Navigation
       --------------------------------------------- */
       .main-navigation {
       	display: block;
       	width: 100%;
       }
   
       .main-navigation ul{
       	display: none;
       	list-style: none;
       	margin: 0;
           padding-bottom:20px;
           padding-left:16px
       }
       .main-navigation ul ul {
       	position: absolute;
       	top: 100%;
       	left: -999em;
       	z-index: 99999;
       }
   
       .main-navigation ul ul ul {
       	left: -999em;
       	top: 0;
       }
   
       .main-navigation ul ul li:hover > ul,
       .main-navigation ul ul li.focus > ul,
       .secondary-menu ul ul li:hover > ul, 
       .secondary-menu ul ul li.focus > ul{
       	display: block;
       	left: auto;
       }
   
       .main-navigation ul ul a {
       	white-space:nowrap;
           width:100%
       }
   
       .main-navigation ul li:hover > ul,
       .main-navigation ul li.focus > ul,
       .secondary-menu ul li:hover > ul, 
       .secondary-menu ul li.focus > ul{
       	left: auto;
       }
       .main-navigation li {
       	position: relative;
       }
       .main-navigation a {
       	display: block;
       	text-decoration: none;
           font-size: 12px;
           padding-top:10px;
           padding-bottom:10px;
       }
       .main-navigation a:hover {
       	display: block;
       	text-decoration: underline;
       }
       .main-navigation ul ul {
           width:100%;
           padding-bottom:20px
       }
       .main-navigation ul ul a {
           border-right:none;
       }
       .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
         position: static;
       }
       .main-navigation li > a:only-child:after {
           content: "";
       }
   
       .main-navigation li li > a:after {
           content: '\f501';
           position: relative;
           right: 0;
       }
       .secondary-menu {
           padding-right:20px
       }
       .secondary-menu ul{
           list-style: none;
           list-style-type:none
       }
   
       .secondary-menu li {
           float:left;
           display:inline-block;
           padding-left:5px;
           padding-right:5px;
           border-right:1px solid #000000
       }
       ```
   
 * That’s ‘Mobile First’. And for Desktop we have:
 *     ```wp-block-code
       @media screen and (min-width: 1085px){
           .main-navigation ul ul,
           .secondary-menu ul ul{
               float: left;
               position: absolute;
               width:auto;
               top: 100%;
               left: -999em;
               z-index: 99999;
           }
           .main-navigation li {
       	position: relative;
           margin-right:20px;
           }
           .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
         position: absolute;
           }
       }
       ```
   
 * Done and dusted!

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

The topic ‘Responsive Multi-level Navigation’ is closed to new replies.

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [event](https://wordpress.org/support/topic-tag/event/)
 * [Subnav](https://wordpress.org/support/topic-tag/subnav/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [mikehenden](https://wordpress.org/support/users/mikehenden/)
 * Last activity: [2 years, 3 months ago](https://wordpress.org/support/topic/responsive-muti-level-navigation/#post-17449874)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics