[Support request] 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.

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

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.

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 there,

try adding this CSS to rotate the icon:

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

Hi there

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

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%;
}