Collapse Mobile Menu in Initial State

  • raphaefeli

    (@raphaefeli)


    9 years, 2 months ago

    Hello everyone,

    I’d like to follow up on a question that was asked but never got a definite answer. I’m trying to have the mobile menu collapsed upon loading the page, so that users can see the content and not have to scroll through a long menu (my menu has lots of items).

    This question was asked in a previous post and CSS code was provided, but the menu is actually going under the page content when expanding. I tried messing with the z-index but no luck.

    CSS code used:

    @media only screen and (max-width: 719px) {
.nav ul { display: none!important; }
.nav li:hover ul { display: block!important; }
}

    Link to the original post: https://wordpress.org/support/topic/mobile-tablet-menu-collapsing?replies=11

    Thanks in advance for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • bdbrown

    (@bdbrown)

    9 years, 2 months ago

    Hi raphaefeli. Can you post a link to your site? Thanks.

    Thread Starter raphaefeli

    (@raphaefeli)

    9 years, 2 months ago

    hi bdbrown, i’m working on a local instance, but will move everything online and let you know. thanks for the help!

    Thread Starter raphaefeli

    (@raphaefeli)

    9 years, 1 month ago

    hi bdbrown, thanks for looking into this. here’s a test page – it is the only one working the site, but it has a nav bar with multiple items.

    http://www.thef1fan.com/circuits/

    bdbrown

    (@bdbrown)

    9 years, 1 month ago

    On a test site I have, with a default installation, the page opens in a mobile view with the menu collapsed. When the menu is activated it pushes the header down and the full menu is expanded. I can understand that if you have many menu items that it will be a long list when expanded. It appears that you’ve modified the menu display so that it only shows the top-level items when it is expanded. As Alex mentioned in the other thread, this causes the javascript to calculate the menu container inline style “height” based on that instead of the fully expanded menu. Since the javascript isn’t dynamic, when you expand the submenus, they end up somewhere outside/behind/under the header. If you inspect the elements and modify the topbar menu container height, you can see that the menus operate normally. Don’t know if there’s a solution other than a rewrite of the mobile menu function to recalculate the topbar height dynamically as the menu expands.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Collapse Mobile Menu in Initial State’ is closed to new replies.

Tags