Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 19, 2017 at 12:18 am #841092
    webWahine

    Hello
    I’m using the left menu for a client, but on mobile it isn;t displaying properly.

    I have this for desktop –

    /* adjust left nav */

    .html_header_sidebar #top #header
    {
    width: 280px !important;
    }

    .html_header_left #main
    {
    margin-left: 280px !important;
    position: relative !important;
    }

    And this for max-width: 767 –

    @media only screen and (max-width: 767px) {
    /* start */

    .onlyMobile {
    display: visible !important;
    }

    /* adjust left nav */

    .html_header_sidebar #top #header
    {
    width: 100% !important;
    }

    .html_header_left #main
    {
    margin-left: 0px !important;
    position: relative !important;
    }

    What seems to be happening is it’s displaying both the menu as text and the hamburger, but also neither the logo or menu items are centered. Please advise. Thanks! :)

    August 19, 2017 at 12:20 am #841093
    webWahine

    To be clear, on mobile I want the logo centered and the hamburger centered underneath. Thanks again!

    August 19, 2017 at 5:45 am #841138
    Nikko

    Hi,

    @media only screen and (max-width:767px) {
  .html_header_sidebar #header .av-main-nav > li {
    display: none;
  }

  .responsive #top .logo {
    width: 100%;
  }

  .responsive #top #wrap_all .main_menu {
    position: relative;
  }

  .responsive #top .av-main-nav .menu-item-avia-special a {
    padding: 0 !important;
    text-align: center;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    August 19, 2017 at 7:23 pm #841377
    webWahine

    That worked, thanks! I had set my left menu bar to be a fixed size so thought I needed to adjust that as well, so it tried changing the fixed, ie –

    /* adjust left nav */

    .html_header_sidebar #top #header {
    width: 280px !important;
    }

    .html_header_left #main {
    margin-left: 280px !important;
    position: relative !important;
    }

    To this under 768 –

    /* adjust left nav */

    .html_header_sidebar #top #header
    {
    /* width: 100% !important; */
    }

    .html_header_left #main
    {
    /* margin-left: 0px !important; */
    }

    But as you see I commented that out and now it’s fine – just wanted to share that bit for anyone who is also using a custom width :)

    August 20, 2017 at 6:29 am #841575
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing your solution. Much appreciated. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 20, 2017 at 10:20 pm #841773
    webWahine

    No, all done, thanks again! I always look carefully before asking and so I think it’s important to share to help others using your excellent theme :)

    August 21, 2017 at 6:38 am #841855
    Rikard

    Hi,

    I totally agree, sharing is caring :-)

    I’ll close this thread for now, please open a new one if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘left menu not displaying properly on mobile’ is closed to new replies.