[Support request] Submenu customization with leftside navigation

Home Forums Support [Support request] Submenu customization with leftside navigation

Home Forums Support Submenu customization with leftside navigation

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1677588
    Alex

    Hi! I wonder is it really possible to replace drop-down submenu in left-side navigation with another sliding out panel like in the project provided? If yes, could you please help me out?

    #1677750
    Ying
    Staff
    Customer Support

    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.

    #1677760
    Alex

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

    #1677802
    Ying
    Staff
    Customer Support

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

    #1677811
    Alex

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

    #1677868
    Ying
    Staff
    Customer Support

    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.

    #1678689
    Alex

    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.

    #1679442
    Ying
    Staff
    Customer Support

    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;
        }
    }
    #1679980
    Alex

    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?

    #1680002
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to rotate the icon:

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

    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

    Doc, you don't just walk into a store, and buy plutonium! Did you rip that off?

    #1789868
    David
    Staff
    Customer Support

    Hi there

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

    #1789976
    Sergio

    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…

    Doc, you don't just walk into a store, and buy plutonium! Did you rip that off?

    #1790095
    Ying
    Staff
    Customer Support

    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%;
    }
    #1790111
    Sergio

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

    Doc, you don't just walk into a store, and buy plutonium! Did you rip that off?

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.