Navigation
Archive / Menu Not Working On Mobiile
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 30, 2016 at 11:48 am #1236762
    Ann
    Participant

    Hi Guys,

    My hamburger menu only works on desktop screen for some reason. Any idea why? Here’s what I have under customizer:

    @media (min-width: 980px) {
    .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
    }
    .x-nav-wrap.mobile.collapse.in, .x-nav-wrap.mobile.collapse.in .x-nav {display: block;}
    .x-nav-wrap.desktop {display: none;}
    }

    Also, when opening up the menu on desktop, the first menu item is not visible with the same color as the other links. See screen shot attached. Thanks for your help!

    Ann

    October 30, 2016 at 11:49 am #1236766
    Ann
    Participant
    This reply has been marked as private.
    October 30, 2016 at 12:00 pm #1236778
    Thai
    Moderator

    Hi There,

    Please find this CSS:

    ul.x-nav {
    display: none;
}

    And change to this:

    .x-colophon.bottom .x-nav {
    display: none;
}

    Hope it helps 🙂

    October 30, 2016 at 12:06 pm #1236788
    Ann
    Participant

    That fixed the mobile issue. Thanks!

    Any idea why the first menu item won’t show?

    October 30, 2016 at 12:39 pm #1236803
    Thai
    Moderator

    Hi There,

    Please also add the following CSS:

    .x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

    Hope it helps 🙂

    October 30, 2016 at 1:11 pm #1236834
    Ann
    Participant

    That made it!

    It’s amazing how quick your support it, I love it!

    Thanks so much 🙂

    Ann

    October 30, 2016 at 7:19 pm #1237055
    Rue Nel
    Moderator

    Hey Ann,

    You’re welcome! We’re happy to help you out.
    If you need anything else we can help you with, don’t hesitate to open another thread.

    Cheers.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1236762 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>