mobile menu

Hi there,

try this CSS:

@media (max-width: 768px) {
    #site-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
        display: block;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(0,-150%,0);
        transition: all 0.3s ease-in;
    }
    #site-navigation.toggled .main-nav>ul {
        pointer-events: auto;
        opacity: 1;
        transform: translate3d(0,0,0);
        transition: all 0.3s ease-in;
    }
}

hi David,

thanks for the above css, works, apart from...

1. when menu opens up, it pushes the main content further down the page and when closing the menu, the content remains further down and doesn't come back to its normal position before menu opened.

also,

2. is it possible to adjust the css so that when the menu opens up, each menu item, home, about, blog etc...slides open one after the other in a moderate pace instead of all coming down in one block, if that makes sense?

3. how do i centre the menu items?

thanks in advance:)

Hi Tony,

Try to replace David's CSS with this:

@media (max-width: 768px) {
    #site-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
        display: block;
        pointer-events: none;
        opacity: 0;
        transition: all 0.3s ease-in;
        position: absolute;
	transform: translate3d(0,-150%,0);
	width:100%;
    }
    #site-navigation.toggled .main-nav>ul {
        pointer-events: auto;
        opacity: 1;
        transition: all 1s ease;
    }
    #site-navigation.toggled .main-nav>ul>li {
        transform: translate3d(0,0,0);
        transition: all 0.3s ease-in;
        text-align: center;
    }
    #site-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul >li {
        transform: translate3d(0,-100%,0);
        transition: all 0.3s ease;
        text-align: center;
    }
    #site-navigation.toggled .main-nav>ul>li:nth-child(5) {
        transition-delay: 0.1s;
    }
    #site-navigation.toggled .main-nav>ul>li:nth-child(4) {
        transition-delay: 0.2s;
    }
    #site-navigation.toggled .main-nav>ul>li:nth-child(3) {
        transition-delay: 0.3s;
    }
    #site-navigation.toggled .main-nav>ul>li:nth-child(2) {
        transition-delay: 0.4s;
    }
    #site-navigation.toggled .main-nav>ul>li:nth-child(1) {
        transition-delay: 0.5s;
    }
}

Hi Ying,

thank you for the above css.

it works, however, the when i click on the hamburger menu, the menu appears with all menu items and then then they scroll below each other one at a time. i would like, if possible, the menu items to be hidden and one appearing after the other.

if not, i'd settle for all of them coming down in one block but having the main content come up to its normal position again once i close the menu.

use temp login to see how it works currently.

thank you.

Not sure I understand what you are trying to achieve.

I edited the CSS in my previous reply based on my understanding.

Let me know if it's the effect you want.

Btw your current menu item background color is set to white, so when the items scroll down, you can see it blocks the logo by like 0.1s.

hi Ying,

no worries.

i'll leave the mobile menu on default, but i please let me know how to align menu items in the centre...thank you:)

Hi Tony,

Are you aiming for something like this? https://share.getcloudapp.com/nOuPPvzo

If so, add this CSS:

@media(max-width:768px){
    li.menu-item a {
        text-align: center;
    }
}

that suits me just fine Elvin, thank you.:)

Nice one. No problem. :D