Manualy change from desktop to mobile menu

  • alyshtva

    (@alyshtva)


    3 months ago

    “Is there an easy way to switch the menu from desktop to mobile and vice versa dynamically, using triggers, for example, when the user scrolls to a specific point on the page? I’m using the Observer API to detect user scroll, but I don’t see any method to switch the menu dynamically other than by modifying this CSS:

    @media (max-width: 768px) {
    .main-navigation ul, .gen-sidebar-nav, .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul, .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) {
    display: none;
    }
    }

    .main-navigation .main-nav>ul {
    display: flex
    ;
    flex-wrap: wrap;
    align-items: center;
    }

    .mobile-menu-control-wrapper {
    display: none;
    margin-left: auto;
    align-items: center;
    }

    @media (max-width: 768px) {
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    display: flex
    ;
    flex-wrap: wrap;
    }
    }

    @media (max-width: 768px) {
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    display: flex
    ;
    flex-wrap: wrap;
    }
    }

    But`s seems kinda workaround way. Would love if you can help me with this.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • David

    (@diggeddy)

    Hi there,

    the method of displaying the mobile nav is 100% CSS. So you would need to write your own CSS to display, perhaps use your intersectionObserver to toggle a body class to overwrite the themes CSS.

    Thread Starter alyshtva

    (@alyshtva)

    Hmm, I see. Are there any recommendations I should follow? For example, are there specific theme classes that definitely need to be changed during the process, or does classes in my question cover everything I need to change?

    • This reply was modified 3 months ago by alyshtva.
    ying

    (@yingscarlett)

    Not sure what you mean by changing classes, can you explain some more?

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.