Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1273833

    Hi Guys,

    I hope you’re all doing well at these times. I would need help regarding configuration of main menu.

    For our site we are using General Layout setting “Left sidebar” to display logo + menu on the left side. The challenge we have right now is that we need this left side menu with submenu-items (2nd + 3rd Level) and we would like to have a functionality similar to Stripe Docs where you have an arrow before each menu item and if you click on it all corresponding sub-menu items are shown up directly below the parent item& if you click again on the arrow sub-menu items will disappear.

    Would be great to get a solution for this.

    Thanks
    Frank

    #1274300

    Hey Frank,

    Thank you for the inquiry.

    The main menu looks almost exactly like the stripe docs menu when we checked the site, aside from the arrow position. Do you need additional help with this?

    Best regards,
    Ismael

    #1274307

    Well on default there are no arrows – aren’t they. – and it is no toggler – it reacts on hover – not on click.
    You can have an arrow on those who have a submenu. f.e.:

    #avia-menu .menu-item.dropdown_ul_available:before{
        position: absolute;
        top: 12px;
        left: -15px;
        content: "\e883";
        font: 20px/1 entypo-fontello;
        speak: never;
        display: block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none;
        z-index: 1;
        transition: all 0.7s ease;
    }
    
    #avia-menu .sub-menu .menu-item-has-children:before{
        position: absolute;
        top: 12px;
        right: 10px;
        content: "\e883";
        font: 20px/1 entypo-fontello;
        speak: never;
        display: block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none;
        z-index: 1;
        transition: all 0.7s ease;
    }
    
    #avia-menu li.menu-item.dropdown_ul_available:hover:before{
        transform: rotate(-90deg);
        color: red !important;
        transition: all 0.7s ease;
    }
    
    #avia-menu .sub-menu .menu-item-has-children:hover:before{
        transform: rotate(-90deg);
        color: red !important;
        transition: all 0.7s ease;
    }

    see:

    #1274498

    Hi Ismael, hi Guenni,

    Thanks a lot for your support. In the meantime i have installed a WP plugin “Iks Menu” which helps me a lot with the accordion menu. I only need to change the arrow position to the left.

    Best
    Frank

    #1274532

    What number did you use for your layout?
    https://iks-menu.ru/previews/

    on most of those previews : they work with flex model.
    If you gave to the first flex-item an order number 2 they change position:

    .iksm-terms .iksm-term__link {
        order: 2;
    }

    to bring the parents in line with the items with children you can do that:

    .iksm-term:not(.iksm-term--has-children) {
        margin-left: 40px;
    }

    or style the menu 5 to your needs ( different arrows, and background)

    #1274706

    Hi Guenni,

    Not sure where I can see which skin is currently active. I simply installed the plugin and used the active one. However, your CSS solved my issues with the arrows and position of the parent elements.

    Thanks a lot for you help.

    #1274730

    Hi force-media ,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1274826

    how did you implement that menu to enfold?
    is it easy to do ?

    #1275246

    i did implement it as a sidebar widget, which was quite easy.

    #1275456

    Hi,

    Thanks for sharing @force-media :-)

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.