Offcanvas menu menu visibility

Hi Sosa,

Can you link us to your site?
I would have to check your current settings in order to provide CSS solutions.

Let me know :)

Hi Ying,
thanks for contacting me. Here is the page:
https://termekek.jatszhatoterek.hu/blog/termekek/billego-figura/

You can see that the offcanvas menu is now closed. I would like it to look like as it looks when I open it, with the parent menu items visible. For easier access on desktop.

Thank you!
Sosa

Give this CSS a try :)

@media (min-width: 1025px) {
    .offside-js--is-open .slideout-overlay {
        visibility: hidden;
        opacity: 0;
    }
    .offside--left.is-open, .offside-js--is-left .offside-sliding-element {
        transform: translate3d(0,0,0);
    }
    .offside, .offside--left {
        left: 0;
    }
}

Let me know :)

Hi Ying,

thanks for the code! Using that I could achieve the look I wanted (with a little more additional css). But now the behavior changed: the dropdown menu at the first parent menu item (the category) doesn't open the submenu, instead it jumps to this category's listing page when I click on the down-arrow.

Thanks if you could help!

BR
Sosa

Hi Zoltan,

I see what you mean, could you remove the CSS from your site, so I can try to see if there's a better solution?

Update: I tried on my testing site, but seems only use CSS won't work when there's a submenu, since slideout navigation involves some Javascript code. Unfortunately, it's out of the scope of the forum.

I would suggest using primary navigation and CSS to reach the similar look, something like this:
http://gpsites.co/sider/

Let me know if you would like persuade this way, we'll be more than happy to help :)

Hi Ying,

thanks for your help, I was away for a few days.
Your suggestion using menu like on Sider site, is okay for me, if I can use submenus this way.
Thank you, if you can help me to achieve this.

Regards,
Sosa

Let's try these steps:

1. Go to customizer > layout > Off Canvas Panel, set it to Mobile only.

2. Add this CSS:

@media (min-width: 769px) {
.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
    display: flex;
}
.site-header .inside-header, div#primary-menu > ul {
    display: flex;
    flex-direction: column;
}
.main-navigation:not(.toggled) .main-nav > ul > li:hover > ul {
    position: relative;
}
.main-navigation:not(.toggled) .main-nav > ul > li {
    width: 100%;
}
body {
    margin-left: 300px;
}
}

Let me know when these 2 steps are done, then I can have a look at your site and see if there's more CSS is needed to tweak the layout.

Hi, thanks,

the 2 steps are done.

Hi Zoltan,

I don't see the CSS has been added to your site, did you add them to customizer > additional CSS?

Let me know :)

Yes, I did.

Could you check your CSS and look for this line:
https://www.screencast.com/t/GpPsGHuwtm

Remove the */after the height:100vh;.

Let me know :)

Oh, yes, now it's getting closer!
I hope I can tweak it now by myself.
Thanks for your kind help!

Best Regards,
Sosa

I've edited the CSS here, give it a try :)
https://generatepress.com/forums/topic/offcanvas-menu-menu-visibility/#post-1846835

You can assign this menu to both the primary menu and the off-canvas menu.

Thank you for your help! It really got better!

BR
Sosa