Archived topic
Custom vertical menu based off of "Sider" template
3 replies · Started by Ronja on April 5, 2021
Hey there,
first of all I would like to thank you for the great work you are doing here. I've been using GeneratePress for a couple of weeks now and I'm thrilled! The support here is also very good, which is unfortunately rather rare these days.
I tried to recreate my old, slow, Elementor using and completely overloaded theme with GeneratePress + GenerateBlocks - with great success! If you already have a bit of experience with CSS and PHP, it's so easy to do with GeneratePress as foundation.
Unfortunately I couldn't manage to implement the vertical menu like in this demo, maybe you can give me a hand here?
I want the search box displayed below the logo and the menu items should align like in the demo instead of being centered. I also like to smooth the toggling of menu items with an animation. The sub-menus popping out instantly looks very choppy.
My vertical menu is based off of your "Sider" template from the site library.
Thanks in advance!
Cheers
Ronja
Hi Ronja,
Try this CSS to align left the menu items.
.main-navigation .main-nav>ul {
align-items: flex-start;
}To bring up the search bar below the logo:
.header-widget {
order: 0;
margin-top: 3em;
}The social icons are in the same element so that they'll be brought up as well.
I would suggest using a block element to add the social icons, then choose generate_menu_bar_item as hook, select entire site as location, set the priority to 50.
https://docs.generatepress.com/article/block-element-overview/
Hey Ying,
thanks for your reply!
I would suggest using a block element to add the social icons, then choose generate_menu_bar_item as hook, select entire site as location, set the priority to 50.
https://docs.generatepress.com/article/block-element-overview/
This worked great, thanks for the advice. However, your other CSS snippets did not lead to the desired result. But I tried again myself and managed it anyway, so it's all good.
Now one thing remains unsolved: The animation when opening the sub menu. How do I make the submenu not pop up instantly but slide down like in the linked demo? It seems they did it with JS, but I'm quite sure we can do that with CSS only - question is how?
I tried adding a transition to the toggled-on class, but somehow that didn't work.
Cheers
Ronja
Give this CSS a try:
.main-navigation .sub-menu.toggled-on {
max-height: 800px;
}
.main-navigation .sub-menu {
display: block !important;
max-height: 0;
transition: max-height 300ms ease-in-out;
overflow: hidden !important;
visibility: visible !important;
}