Submenu customization with leftside navigation

Hi Alex,

I'm not sure I fully understand your question here, are you saying you want the sub menu be replaced by GP's off canvas panel?

Unfortuanly I don't think that's doable, off canvas panel is another set of independent menu.

I would like the sub menu to be on another independent panel that appears on the right
https://paste.pics/BQT23

Are you wanting the submenu to move to the right like this?
https://www.screencast.com/t/LDfW3sQgeC

Sorry for being not explanatory enough, I'd like it to work exactly like on these site.

Ah I see, yes, it's possible :)

If you already have your vertical menu set up, we can have a look to your site and point the direction with CSS solution.

Hi again! I've just set up the site and its vertical menu. You'll find the access below as it's under construction mode.

Give this CSS a try:

@media (min-width: 1000px) {
   .site-header {
        overflow: visible;
    }
   
    .main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
        left: 200px;
        display: flex;
        flex-flow: column nowrap;
        top: 0;
    }
    .main-navigation:not(.toggled) ul li.sfHover>ul:before, .main-navigation:not(.toggled) ul li:hover>ul:before {
        content: "";
        background-color: #323538;
        z-index: 0;
        position: absolute;
        top: -100vh;
        left: 0;
        width: 240px;
        height: 200vh;
    }
}

Hi Ying! Thanks for your great support! It looks and works really good. Is it possible to change menu toggle icon arrow somewhere in the theme code to >?

Could you probably help to adjust the drop down menu to be working like this as well?

Hi there,

try adding this CSS to rotate the icon:

.gp-icon.icon-arrow {
  transform: rotateZ(270deg);
  top: 3px;
  position: relative;
}

Hi!

I´m trying to do the same effect but the CSS code doesn´t do the work...

The website is https://wordpress-507255-1841118.cloudwaysapps.com/

I have tried the code above:

@media (min-width: 1000px) {
.site-header {
overflow: visible;
}

.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
left: 200px;
display: flex;
flex-flow: column nowrap;
top: 0;
}
.main-navigation:not(.toggled) ul li.sfHover>ul:before, .main-navigation:not(.toggled) ul li:hover>ul:before {
content: "";
background-color: #323538;
z-index: 0;
position: absolute;
top: -100vh;
left: 0;
width: 240px;
height: 200vh;
}
}

Thanks in advance

Hi there

can you make sure the Navigation Drop Down option is set to Hover in Customizer > Layout > Primary Navigation.

David,
You are the best. That was the problem.
But now...
The submenu appears correctly but doesn't stay fixed...
It disappears when I try to access any subitem...

Hi Sergio,

Try to add this CSS as well:

.site-header .main-navigation li a:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    left: 100%;
}

Yes!!!!
Works perfectly now
The best support forum ever.
Thank you very much!