Menu always expanded in mobile view

  • Unknown's avatar
    chindits · Member ·

    Hi,

    I am using the lovecraft theme. While viewing the site in cellphone view, the menu (and all sub-items) appear expanded.

    This is problematic if the menu has a lot of primary and sub-items in it. Users are required to scroll for a bit before they can hit the actual post. Is there a way to make this menu collapsible to the primary items, while hiding the sub-items unless clicked?

    My site: is at: http://achillestheheel.com

  • nigeljoy · Staff ·

    Hi there!

    I checked your site on a mobile and the menu was not expanded by default. May I know which mobile device and browser you are using?

    If possible, please take a screenshot, so I can better understand the issue? You can then attach the screenshot to a reply so I can take a look at it.

    The page at the following link has some helpful tips for taking screenshots http://en.support.wordpress.com/make-a-screenshot/

  • Unknown's avatar
    chindits · Member ·

    Hi Nigel,

    I am using a OnePlus9. I have viewed the site using both Firefox and Google Chrome. There appears to be no way to collapse the menu while viewing on a cell phone.

    The top screenshot is of chrome and the one on the bottom is of Firefox.

  • nigeljoy · Staff ·

    Thanks for the screenshots!

    To clarify, the header menu expands only after you click on the three lines, and not by automatically when you load the website, correct?

    Checking the site, it appears the top of the header section of your site is not visible at all which might be why you are unable to see the close button for the menu at the top. As a workaround, could you please try the following CSS code to add increasing top padding value of the site header on mobile view? 

    /* Increase header top padding | 8200758-NJ */

@media screen and (max-width: 1000px) {
    .site-header {
padding-top: 50px;
}
}

    Let me know how it goes.

  • Unknown's avatar
    chindits · Member ·

    Hi Nigel,

    Thanks for the CSS code. This was really helpful in sorting out the header section of the site!

    However, I am specifically trying to also get the sub-items within the menu to collapse, to make the menu (as it appears after pressing the three lines) appear more compact. Basically, I would like to hide the sub-items within the menu until their parent menu item is clicked and then they appear or drop down. Does that make sense?

    This is because I intend to have at least four primary drop-down menus and quite a few entries that will be linked to sub-items within the menu.

    If this is not possible, the only other option that I can see is to minimize the menu is to link the primary menu items to pages with links in them.

  • mrfoxtalbot · Staff ·

    However, I am specifically trying to also get the sub-items within the menu to collapse, to make the menu (as it appears after pressing the three lines) appear more compact. Basically, I would like to hide the sub-items within the menu until their parent menu item is clicked and then they appear or drop down. Does that make sense?

    I see what you mean. thank you for the additional details. I came across a similar case in the past and was able to fix it using this Custom CSS code:

    @media all and (max-width:1060px){
.menu-item-has-children .sub-menu {
display:none;
}
.menu-item-has-children:active .sub-menu {
display:block;
}
}

    This code will hide submenus and only show them when the parent element is clicked. Unfortunately, this will not work on your site for two reasons:

    • The parent element cannot be a link itself. If the parent element is a link, clicking on it will open the submenu but will also take to the parent menu item’s link.
    • The mobile menu must adapt its height automatically to prevent submenus from overflowing outside the mobile menu container. This will depend on your theme, as each theme handles the height of its mobile menu in different ways.

    Given the above, these would be our options:

    • Remove links from parent menu items and find a theme that adjusts its height.
    • Upgrade to a Creator plan to install a plugin that provides more control over how your mobile menu behaves.
    • Explore other ways to highlight your subcategories. For instance, you could leverage widget visibility to ensure that all sibling categories show their sibling categories in the sidebar.

    I hope that helps!

  • Unknown's avatar
    chindits · Member ·

    Hi,

    Thanks for the detailed explanation. I understand what the problem now is. The Lovecraft theme is interesting but I have started to realize its limitations. The Creator plan is a bit of an overkill for my needs. I am not sure how to use widgets to sort out sibling categories. I can look into that.

    In the meantime, if you guys could suggest an alternative theme for my type of content (writer/designer/artist), that would be great.

    Thanks again.

  • mrfoxtalbot · Staff ·

    In the meantime, if you guys could suggest an alternative theme for my type of content (writer/designer/artist), that would be great.

    I took a quick look and I found that nested menus in the Radcliffe theme are collapsed by default which suits your need. It is also a Classic theme so switching over to it should be relatively seamless.

    If the theme does not meet your expectations, you can always switch back to Lovecraft.

    PS: I enjoyed reading your post about B-17s and their weak spot if attacked head on, thank you for your blogging!

  • mrfoxtalbot · Staff ·

    In the meantime, if you guys could suggest an alternative theme for my type of content (writer/designer/artist), that would be great.

    I took a quick look and I found that nested menus in the Radcliffe theme are collapsed by default which suits your need. It is also a Classic theme so switching over to it should be relatively seamless.

    If the theme does not meet your expectations, you can always switch back to Lovecraft.

    PS: I enjoyed reading your post about B-17s and their weak spot if attacked head on, thank you for your blogging!

  • Unknown's avatar
    chindits · Member ·

    Thanks, I took a look at Radcliffe. It’s interesting back has other deficits. I will stick with Lovercraft for a bit as it largely suits my needs. I have also reached out to the maker of the theme. Perhaps, he can help out with a few tweaks.

    And thank you for your kind comment regarding my post. It’s really appreciated!

  • The topic ‘Menu always expanded in mobile view’ is closed to new replies.