Archived topic

Having difficulty with Slide-out menu position

5 replies · Started by Dinesh on January 7, 2018

Viewing posts 1–6 of 6

January 7, 2018 at 12:26 am #464888

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

January 7, 2018 at 9:12 am #465171

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 :)

January 7, 2018 at 11:57 am #465305

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

January 7, 2018 at 3:38 pm #465383

Can you try clearing W3 Total Cache?

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

January 7, 2018 at 5:48 pm #465431

That did it.

Thank you very much.

Regards
D

January 7, 2018 at 6:07 pm #465439

Glad we could help!

This archived topic is closed to new replies.

Start building better websites today.