Mobile Sub-Menues Not Displaying

  • Author
    Posts
  • #3030717

    komakulshan
    Member

    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 mountbakerclubsite.wordpress.com.

    #3030893

    musicdoc1
    Member

    Hi,

    That looks like a bug. I’ll call for staff attention. Staff will respond here.

    #3030912

    komakulshan
    Member

    Thanks!

    #3030930

    musicdoc1
    Member

    You’re welcome. : )

    #3031011

    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!

    #3031034

    komakulshan
    Member

    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.

    #3031039

    Hi komakulshan,

    Thanks for clarifying — I’ll do some further testing and come back to you if I need any more information.

    #3031040

    komakulshan
    Member

    Thanks Bunches!

    #3031048

    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
        }
    }
    #3031051

    komakulshan
    Member

    Thanks so much. CSS will be the death of me ;-)

    #3031053

    You’re welcome :)

    #3031079

    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.

The topic ‘Mobile Sub-Menues Not Displaying’ is closed to new replies.