Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Having difficulty with Slide-out menu position

Home Forums Support [Resolved] Having difficulty with Slide-out menu position

Home Forums Support Having difficulty with Slide-out menu position

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

    I was able to move the slide out menu to the right using the following code

    .slideout-navigation {
    left: auto !important;
    right: 0;
    transform: translateX(100%) !important;
    }

    .slide-opened .slideout-navigation {
    transform: translateX(0px) !important;
    }

    However this moves the slide-out menu on both desktop & mobile to the right. I’d like mobile to use the default left hand side. want the slide-out to move to the right only for desktop. Can I modify the code above to have it only for desktop?

    Regards

    GP Premium 1.5.6
    #465171
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Wrap your CSS in a media query like this:

    @media (min-width: 769px) {
        .slideout-navigation {
            left: auto !important;
            right: 0;
            transform: translateX(100%) !important;
        }
    
        .slide-opened .slideout-navigation {
            transform: translateX(0px) !important;
        }
    }

    That should do it.

    Let me know 🙂

    #465305
    Dinesh

    Hmm. I tried the above code but that did not seem to work. Below is my entire CSS file

    #welcome{
    max-height: 0px;
    }

    #masthead.shrinked + #welcome {
    margin-top: 113px;
    }


    @media
    (min-width: 769px) {
    .slideout-navigation {
    left: auto !important;
    right: 0;
    transform: translateX(100%) !important;
    }

    .slide-opened .slideout-navigation {
    transform: translateX(0px) !important;
    }
    }

    nav.slideout-navigation {
    width: 220px;
    }

    I put the slide out code within the media query but the menu still slides out from the right on mobile & desktop.. I want it only on desktop.

    Regards

    #465383
    Leo
    Staff
    Customer Support

    Can you try clearing W3 Total Cache?

    I still see the old code being used without media query.

    #465431
    Dinesh

    That did it.

    Thank you very much.

    Regards
    D

    #465439
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.