Home Forums Pro Themes Bizlight Pro Mobile Menu is Always Expanded

This topic contains 5 replies, has 2 voices, and was last updated by  wensolutions 10 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #74009

    Manufacturing-Works
    Participant

    Hello again. It has come to my attention that the menu on the mobile version of the website is always expanded, and blocks the content of pages. Is there an easy fix to make the menu bar collapsed by default when a user navigates to the pages on a mobile device?

    Thanks in advance!

    #74037

    wensolutions
    Keymaster

    Hello @manufacturing-works,

    In the mobile view, Hamburger menu is displayed. It will open upon clicking on it and will remain closed upon reclicking the menu icon even when sliding down the page as you can see in below-given screenshot:L

    https://imgur.com/a/jI7bS9g

    But if your menu is not working as mentioned above in responsive view then we need to see your site URL so that we can inspect further and help you.

    Thank you.

    Best Regards!!

    #74120

    Manufacturing-Works
    Participant

    That gif is exactly how I would like it to look, however, it does not do that (at least on my end). My site URL is: http://www.manufacturing-works.com/

    #74135

    wensolutions
    Keymaster

    Hello @manufacturing-works,

    The mobile menu has not worked because you have made certain changes.

    Now to fix the menu in responsive view use below given CSS.

    For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.

    .site-header-menu.toggled-on, .no-js .site-header-menu {
        display: block;
    }
    .site-header-menu {
        display: none;
    }

    Hope this helps.

    Thank you.

    #74219

    Manufacturing-Works
    Participant

    That works, thank you! However, for anyone else who has the same issue and references this, I wrote your code like this.

    @media only screen and (max-width:767px){
      .site-header{
        position: sticky!important;
      }
      .site-header-menu.toggled-on, .no-js .site-header-menu {
        display: block;
      }
      .site-header-menu {
        display: none;
    }

    Thanks again!

    #74768

    wensolutions
    Keymaster

    Hello @manufacturing-works,

    Glad we could help you.

    If you have any issues further then please let us know.

    Thank you.

    Best Regards!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.