Mobile navigation wont disappear on small screen

  • Resolved liianpaljonhyvvee

    (@liianpaljonhyvvee)


    10 years, 8 months ago

    Hi,

    I have a problem with mobile navigation.

    I’ve created a child-theme and done some changes to the theme. Suddenly I also managed to break the mobile navigation: when browsing less than 800px wide screen the <div id=”menu-primary”> pops out and stays above the background image all the time. It doesn’t disappear at all.

    The situation occurs on every page excluding static pages (https://kakkujakonvehti.fi/ vs. https://kakkujakonvehti.fi/tarinan-alku/ ).

    I’ve added this to the child style.css:
    body.home, body.singular-post {
    background: url(images/bg-puolukan-lehti-1920px.jpg) no-repeat center center fixed !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    And on the static pages I’m using WP-Backgrounds Lite plugin.

    Would you have any idea what I’ve broke and how to fix it?

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    The issue is with z-index and the hierarchy of the page. Basically, since the body has the background image and the menu-primary is inside body, it’s going to be in front of it no matter what.

    The plugin is working because it is adding the background image to a div added after the footer. This allows the menu to fall behind it.

    I’d recommend copying the CSS and markup used by the plugin to get it working on all pages.

    Thread Starter liianpaljonhyvvee

    (@liianpaljonhyvvee)

    Ok, thank you for this!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile navigation wont disappear on small screen’ is closed to new replies.