Menu icon Foundation
Mobile submenu items display horizontally

Hello!

I'm working with a JointsWP Wordpress theme, so not directly with Foundation.

I have a menu that uses 'nav-title-bar'. It has a top-level item ('Genres') that contains a list of subitems ('Action', 'Adventure', etc.). On the desktop at full size, it works perfectly. When I narrow the browser window <= 640px, the menu changes to a mobile version: it also works correctly. But on my phone (width 640px), the subitems are listed horizontally, as in the image below.

screenshot

 Any idea why this is happening, or more importantly, how to fix it?

Thank you very much for any help!

Ariel

jointswpmenumobile

Hello!

I'm working with a JointsWP Wordpress theme, so not directly with Foundation.

I have a menu that uses 'nav-title-bar'. It has a top-level item ('Genres') that contains a list of subitems ('Action', 'Adventure', etc.). On the desktop at full size, it works perfectly. When I narrow the browser window <= 640px, the menu changes to a mobile version: it also works correctly. But on my phone (width 640px), the subitems are listed horizontally, as in the image below.

screenshot

 Any idea why this is happening, or more importantly, how to fix it?

Thank you very much for any help!

Ariel

Ryan Patterson over 2 years ago

Ariel,

 

Can you provide your code? Without seeing your html, the only thing I can suggest is adding the following classes to your sub menu UL.

 

vertical menu

 

This will make the submenu vertical.

Or if you don't use the foundation built in stuff, you can always add display: block to the submenu li's in css.  

Ryan

Ariel Frailich over 2 years ago

Hi Ryan,

Thank you for your reply!

I failed to mention (corrected now) that I'm using JointsWP, a Wordpress theme that incorporates Foundation. The menu items are generated by Wordpress, which limits the amount of control I have.

The submenu items do have 'vertical menu' classes, but something else must be overriding that. Here are the first few menu items:

<div class="off-canvas position-right is-transition-push" id="off-canvas" data-off-canvas="rwghuq-off-canvas" aria-hidden="true">
	<ul id="menu-streamiacs" class="vertical menu" data-accordion-menu="ejx3sm-accordion-menu" role="menu" aria-multiselectable="true"><li id="menu-item-2539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2539 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Films" aria-controls="l6mja0-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/film/" data-slimstat="5">Films</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2539" aria-hidden="true" id="l6mja0-acc-menu" style="display: none;">
	<li id="menu-item-2538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2538 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/my-lists/" data-slimstat="5">My Lists</a></li>
</ul>
</li>
<li id="menu-item-2411" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="ynetoj-acc-menu" aria-expanded="false"><a href="#" data-slimstat="5">Genres</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2411" aria-hidden="true" id="ynetoj-acc-menu" style="display: none;">
	<li id="menu-item-92" class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="r9d0om-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
	<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-92" aria-hidden="true" id="r9d0om-acc-menu" style="display: none;">
		<li id="menu-item-327" class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
	</ul>
</li>
	<li id="menu-item-183" class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="g23p1a-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
	<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-183" aria-hidden="true" id="g23p1a-acc-menu" style="display: none;">
		<li id="menu-item-396" class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
	</ul>
</li>

Time to do some digging. Again, thank you very much for your help!

Ariel

 

Ryan Patterson over 2 years ago

Hi Ariel,

I too use JointsWP exclusively when I build WP themes. It's a wonderful starter theme. It's strange because it should be working correctly right out of the box. So perhaps there is a custom style that is conflicting with it. 

 

Do you have a URL I can view your site at? Or are you working locally. Have you used your browser's code inspector to see if any styles are being added to make it horizontal on mobile? Any console errors?

But as a hacky fix, you should be able to use css. 

 

.off-canvas .submenu > li {
	display: block;
}

 

Thanks, 

 

Ryan

Ariel Frailich over 2 years ago

Hello again, Ryan,

It's bizarre. I removed all custom styles and disabled all the plugins that I thought could affect the display, but nothing changed.

I had a look at the source in the Inspector and found that 'vertical' was missing!

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="9kyyw1-acc-menu" aria-expanded="true" id="71wgk5-acc-menu-link"><a href="#" data-slimstat="5">Genres</a>
<ul class="menu submenu is-accordion-submenu is-active" data-submenu="" role="menu" aria-labelledby="71wgk5-acc-menu-link" aria-hidden="false" id="9kyyw1-acc-menu" style="display: block;">
	<li class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="igzuu7-acc-menu" aria-expanded="false" id="yi7wjr-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
	<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="yi7wjr-acc-menu-link" aria-hidden="true" id="igzuu7-acc-menu" style="display: none;">
		<li class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
	</ul>
</li>
	<li class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="7s8llt-acc-menu" aria-expanded="false" id="qupifv-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
	<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="qupifv-acc-menu-link" aria-hidden="true" id="7s8llt-acc-menu" style="display: none;">
		<li class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
	</ul>
</li>

Still in Inspector, I added 'vertical' to the <ul> on the second line above. Bingo -- it works!

Now to make it permanent... is there a less ugly solution than a snippet of JS?

I also noticed that the submenu items are aligned with the parent. Shouldn't they be indented?

Thank you again for your help -- it's much, much appreciated!

Ariel

Ariel Frailich over 2 years ago

Oh I forgot a few things:

URL: http://streamiacs.atthezown.com

'display: block' didn't change anything.

No errors in console.

Thank you!

Ryan Patterson over 2 years ago

Ariel,

 

So either you just fixed it since your last message, or you need to clear your browser cache after adding the display: block. When I view the site, the submenu items are displaying vertically. The submenu should be indented by default, but you may have to add margin-left to the submenu UL. 

One suggestion though, since your menu is really robust, the accordion menu probably wouldn't be the best solution for your mobile menu. I would suggest using the off-canvas menu or if you want to keep the top-bar responsive nav, just change it to use the drilldown menu instead of accordion. 

 

If you want to switch to off-canvas, change the following code in the header.php file

<?php get_template_part( 'parts/nav', 'topbar' ); ?>

to 

<?php get_template_part( 'parts/nav', 'offcanvas-topbar' ); ?>

 

If you want to keep the nav topbar, but use the drilldown, change the menu function in /assets/functions/menu.php from

// The Top Menu
function joints_top_nav() {
	 wp_nav_menu(array(
        'container' => false,                           // Remove nav container
        'menu_class' => 'vertical medium-horizontal menu',       // Adding custom nav class
        'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown" data-close-on-click-inside="false">%3$s</ul>',
        'theme_location' => 'main-nav',        			// Where it's located in the theme
        'depth' => 5,                                   // Limit the depth of the nav
        'fallback_cb' => false,                         // Fallback function (see below)
        'walker' => new Topbar_Menu_Walker()
    ));
} 

 

to 

// The Top Menu
function joints_top_nav() {
	 wp_nav_menu(array(
        'container' => false,                           // Remove nav container
        'menu_class' => 'vertical medium-horizontal menu',       // Adding custom nav class
        'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="drilldown medium-dropdown" data-close-on-click-inside="false">%3$s</ul>',
        'theme_location' => 'main-nav',        			// Where it's located in the theme
        'depth' => 5,                                   // Limit the depth of the nav
        'fallback_cb' => false,                         // Fallback function (see below)
        'walker' => new Topbar_Menu_Walker()
    ));
} 

 

Basically, all i did is change the part:

'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown" data-close-on-click-inside="false">%3$s</ul>'

and change the word "accordion" to "drilldown". This will keep the menu a dropdown on medium up, but a drilldown on small.

Ryan Patterson over 2 years ago

Wait nevermind, I just realized if you resize your browser from large to small, the submenu items display vertically, but if you load the page in small orientation, the submenu items are displaying horizontally. 

 

When I inspect the element, I'm seeing display: table-cell; on the li's. But see display: block on the actual links (a tag). Maybe add !important to the style rule I provided earlier. When I add it in the code inspector, it makes them vertical. 

 

But anyways, I would just change to a drilldown menu and not even have to worry about it. 

Ariel Frailich over 2 years ago

Hi Ryan,

I'm stumped. I cleared History and Website Data, then removed All Website Data in Advanced, and the submenu still displays horizontally. iPhone 5, iOS 10.3.1. Is my phone in the Twilight Zone?!? Sigh... :(

I had tried all four nav styles; title-bar is the only that displays a closed menu, the others show an open menu at the top of the page (and no hamburger to close it).

I'll try the changes a bit later. Thank you!!

Ariel

Ryan Patterson over 2 years ago

Hi Ariel,

 

I'm no longer seeing the submenu items displaying horizontally, so that's good. But I still think you should use a drilldown on small instead of an accordion. Just my opinion from a user experience point-of-view. 

 

Could you try my recommendation and change the menu function in menu.php to use drilldown instead of accordions (simple one word change). I did some testing on a local copy of JointsWP, and it works just fine. If it causes issues on your site, at least then others will be able to inspect and hopefully figure out what is going wrong. 

 

Ryan

Ariel Frailich over 2 years ago

Hi Ryan,

Sorry for the long delay. When I posted my last message, the thread was marked as spam and blocked. Meanwhile, I had to ready the site to be presented to various groups, which kept me extremely busy.

So -- the menu. I did change it to drilldown as you suggested, but it still had problems. Unfortunately, I don't remember exactly what those were, and to get the site ready for the client's needs (and last-minute changes), I had to make a few hacks to the menu system. It's perfect on large screens -- and a mess on small ones. Fixing it will have to wait until I can put the site back in dev mode.

All I can do at this point is thank you, once again, for your help. All the best!

Ariel

Ariel Frailich about 2 years ago

I finally got it working. Since this is for a mobile app -- separate from what's displayed in the browser -- I created an additional top-nav menu as drilldown, and it works beautifully. Perhaps this freed it from some interfering CSS.

Thank you for pointing me in the right direction!

Ariel