Mobile Sub-Menues Not Displaying

komakulshan · Member · Oct 12, 2017 at 5:19 pm
Copy link

Add topic to favorites
Our sub-menu items aren’t displaying in the mobile view (Hemingway Revisited theme) for the Membership, About Us, and Leadership menu items. Is there a limit for how “large” the mobile sub-menu can appear because of the amount of menu items added. If so, is there a fix other than removing some sub-menu items?

Thanks

The blog I need help with is: (visible only to logged in users)
musicdoc1 · Member · Oct 12, 2017 at 6:08 pm
Copy link
Hi,

That looks like a bug. I’ll call for staff attention. Staff will respond here.
komakulshan · Member · Oct 12, 2017 at 7:02 pm
Copy link
Thanks!
musicdoc1 · Member · Oct 12, 2017 at 8:33 pm
Copy link
You’re welcome. : )
gemmacevans · Staff · Oct 13, 2017 at 9:39 am
Copy link
Hi komakulshan,

Our sub-menu items aren’t displaying in the mobile view (Hemingway Revisited theme) for the Membership, About Us, and Leadership menu items.

I’ve visited mountbakerclubsite.wordpress.com using a mobile device and haven’t been able to view the sub pages in your menu. The top level page is being displayed (Leadership) but the arrow which should display the sub pages is unresponsive. Can you confirm whether this is the same behaviour you are seeing?

Also, which device and browser(s) are you using?

Is there a limit for how “large” the mobile sub-menu can appear because of the amount of menu items added.

I can see you have added three or four sub pages, which isn’t a huge amount. Based on that, it’s unlikely this is the issue but I’ll look it further once I know more.

Thanks!
komakulshan · Member · Oct 13, 2017 at 4:07 pm
Copy link
Thanks for looking into this. Yes, the unresponsive arrows you describe is exactly the issue for the mobile site. The site works fine using Chrome Explorer, Safari and Firefox.

I am using an iPhone 6 and iPad Air running iOS 11.0.2 to view the site for mobile usability.
gemmacevans · Staff · Oct 13, 2017 at 4:35 pm
Copy link
Hi komakulshan,

Thanks for clarifying — I’ll do some further testing and come back to you if I need any more information.
komakulshan · Member · Oct 13, 2017 at 4:41 pm
Copy link
Thanks Bunches!
garysixtyeight · Member · Oct 13, 2017 at 6:09 pm
Copy link
Hi everyone,

This isn’t a bug in the theme.

The problem is caused by a custom CSS rule that has been added to the customizer in My Sites > Customize > CSS. It hides submenu items on screens narrower than 800px.

This is the problematic rule. Please note the first part which hides the submenu items.
```
@media screen and (max-width: 800px) {
    .main-navigation ul ul {
        display: none;
    }
    .main-navigation a {
        padding-left: 2em;
        background-color: #5c617e
    }
    .search-submit {
        background: #5c617e
    }
}
```
To make the menu behave like the theme demo (where submenu items are always shown on small screens), the CSS should be replaced with this:
```
@media screen and (max-width: 800px) {
    .main-navigation a {
        padding-left: 2em;
        background-color: #5c617e
    }
    .search-submit {
        background: #5c617e
    }
}
```
komakulshan · Member · Oct 13, 2017 at 6:52 pm
Copy link
Thanks so much. CSS will be the death of me ;-)
garysixtyeight · Member · Oct 13, 2017 at 7:03 pm
Copy link
You’re welcome :)
staff-zinnia · Staff · Oct 15, 2017 at 12:18 pm
Copy link
Good morning –

Thanks for sharing that CSS snippet, garysixtyeight :) Much appreciated.

komakulshan – It takes time and practice to learn CSS, so don’t be too hard on yourself. If you’re interested in learning more and practicing there are online resources to help.

No items found.