[Resolved] side-out menu

[naomi]

I’ll check it out
Thank you!

[Tom]

No problem 🙂

[naomi]

I would be happy if you could write me a CSS, so the menu icon will stand at the center of the site’s height and will move when you open and close the menu, like these examples:

https://perlawidislavsky.com/
https://www.siurmochot.co.il/ (i don’t need all the Hovers there)

[Tom]

Can you:

1. Turn on your main navigation
2. Set an empty menu to the Primary theme location: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location
3. Turn the slideout menu to “Both”: https://docs.generatepress.com/article/activating-slide-out-navigation/

Once you do that let me know and I’ll help out with the CSS 🙂

[naomi]

done,
This is the site link: https://newbrand.co.il/tadmit6

[Tom]

Try this:

@media (min-width: 769px) {
    #site-navigation {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 99999;
        height: 100%;
    }
}

[naomi]

Thank you,
What I am looking for is that the menu icon will enter and exit like a tab, from the slideout menu.
As in this example: https://perlawidislavsky.com/
Is it possible?
I hope it’s not a big hassle. If so I will try to get along,
thank you very much

[Tom]

So when you press the button, it will slide out with the menu?

[naomi]

Yes

[Tom]

Try this as your full CSS:

@media (min-width: 769px) {
    #site-navigation {
        position: fixed;
        left: 0;
        right: auto;
        top: 0;
        height: 100%;
        z-index: 9999;
        transition: transform 0s ease;
        transform: translateX(0);
    }

    .slide-opened #site-navigation {
        transform: translateX(270px);
        z-index: 8888;
        transition: transform 300ms ease;
    }
}

[naomi]

I added the code in: Customizing- Additional CSS
But now I do not see any menu icon, he disappeared.

I attach a screenshot of the settings I have given, to make sure they are correct:
https://newbrand.co.il/tadmit6/wp-content/uploads/2017/12/0.jpg
https://newbrand.co.il/tadmit6/wp-content/uploads/2017/12/01.jpg

[Tom]

I just adjusted the CSS above – let me know if it works now 🙂

[naomi]

Now it’s excellent,
thank you very much!

[Tom]

You’re very welcome 🙂

[Author]

Posts