Changing menu transition direction?

  • tfishell

    (@tfishell)


    6 years ago

    I’m working on a site for a friend, and was asked to stylize the menu-opening animation (for when the menu opens on a mobile phone like iOS). Currently the menu slides open left to right, and I was asked to have it slide down from above (starting offscreen obviously). However I can’t seem to change the direction. I can change the speed in seconds and things like color, but not any direction other than left. Any help please? I have some experience with CSS but nothing serious the past few years. And I’m trying to use Customizing > Custom CSS to make changes.

    relevant image: https://i.imgur.com/HUOrag6.png

    (also, sorry if I posted in the wrong forum)

    #sidr.sidr.left {
    background-color: red;
    transition: left 2s !important;
    }

    – am I supposed to be able to change “left” to something like “up” and see a difference? because if I change it to anything other than “left”, the menu just instantly pops in, like anything other than “left” doesn’t work.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Amit Singh

    (@apprimit)

    Hello,

    Please link to the site so that I can check it. Do you have any reference site so that I can understand what you exactly want?

    Thread Starter tfishell

    (@tfishell)

    Hey, yeah the site is https://pepperidgelawns.com/. Notice if you make the browser screen small enough horizontally, the menu becomes the hamburger icon in the upper-right. I was hoping I could change the transition animation when clicking on the icon (unless it’s not possible).

    Amit Singh

    (@apprimit)

    It seems you already have added a code related to it and it is working fine.

    #sidr.sidr.left {
    transition: left 0.3s !important;
}
    Thread Starter tfishell

    (@tfishell)

    What I’m wondering is, can I change “left” to something like “down” or “up” and have the menu come down from above? Or is that not possible? I don’t have a modern phone and have never designed for phones before (and also haven’t designed websites in a few years) so I don’t know much about this.

    • This reply was modified 6 years ago by tfishell.
    • This reply was modified 6 years ago by tfishell.
    Amit Singh

    (@apprimit)

    To use dropdown style, go to Customize > Header > Mobile Menu and select ‘Dropdown’ style instead of ‘Sidebar’ from the Mobile Menu Style setting.

    Thread Starter tfishell

    (@tfishell)

    Thanks!

    Amit Singh

    (@apprimit)

    You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing menu transition direction?’ is closed to new replies.