Mobile Nav does not show sub-pages

[agershon]

http://www.superspecracing.com/

See the "About" stack. Sub pages show in the nav on desktop but not on mobile. I am using a standard Weebly theme and I have not (knowingly) customized the theme at all. 

Any ideas?

[Adam7]

Thanks for posting, @agershon. There is a bug with that theme where it's not showing the carat a person would click to expand the dropdown on mobile. If you tap over to the right of about, you'll see it expand. We have a bug ticket open with our engineers about it, though in the meantime you could try switching to a different theme to see if that helps.

[Martin79]

Hello Adam, we are having the same issue on 2 sites with the Dusk 2 Business theme. Is there a way to resolve this?

[Adam7]

Thanks for posting about this, @Martin79. 

I don't think there's a workaround outside of trying to customize the theme, or switching to a different theme that does not have the issue. The latter seems like the easiest and quickest option for you.

[PaulMathews]

One of the issues with the sub-menu expander caret is that you have to click (or touch in mobile) directly on the caret to expand the sub-menu. You can emulate this on the desktop by shrinking the horizontal width of your browser window until you see the mobile hamburger appear. If you open the mobile menu and click directly on the caret, the sub-menu appears as it should. If you click on the "About" text, it takes you directly to the parent About page but you have no way to access the child pages for that parent.

I'm not sure what's going on with the caret positioning on mobile but you can address the click/touch issue by expanding the caret touch zone from just the small area around the caret icon to the entire width of the About menu item. To do this, you'll need to edit the CSS that controls the style of the expander caret. The modification to the mobile caret css code below should make the expander work if you touch anywhere on the About menu item. The highlighted code should either be modified in the existing mobile caret code or just add the entire two blocks anywhere AFTER where these css elements occur in the theme's existing css code. It's not perfect (the rotation of the caret will be a bit peculiar) but it should address the issue.

.mobile-nav .icon-caret {
-webkit-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
transition: transform 0.3s ease;
position: absolute;
top: 13px;
right: 0;
display: inline-block;
width: 100%;
height: 30px;
background: url(theme/images/arrow.svg?1588967172) no-repeat right center;
}

.mobile-nav .icon-caret.is-active {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
background: url(theme/images/arrow.svg?1588967172) no-repeat left center;
}

[PaulMathews]

One other possibility with the sub-menu expander bug. Your "About" parent menu item is a standard page. My usual practice is to set parent menu items as non-clickable pages. This avoids confusion for site visitors who may hover over a parent menu item, see the drop down list of child pages, and click one of the child pages but not the parent as they may not realize that the parent is itself a page. The better approach in my opinion is to never allow parents to be clickable. Now, making this change may possibly solve the apparent bug with the sub-menu expander because the issue may be caused by the fact that the parent is clickable and that is interfering with the sub-menu expander. I'd make this change in any event but it's worthwhile trying it to see if it in fact addresses the expander bug.

Change the name of your "About" page to "Why Race With Us?" or "Why SSC?" (Try to keep the label short and sweet.) Now add a new page to the site but choose the "Non-clickable" page option. Label this one "About". Move it above the renamed "Why..." page. Now move all the About child pages (curently under "Why...") under the new, non-clickable About page (so that they become child pages of the new About parent). And finally make the "Why..." page itself a child under the new About parent (put it in the first child menu item position before "Rules"). Give that a try and see if it address the click/touch sub-menu expander issue.