Vertical Meni I N Left Possition - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Vertical Meni I N Left Possition

I

iig75

Template 2 years ago

Hello I would like to ask you, how can I create with HelixUltimate template 2.0.13 a permanent LEFT MENU like offcanvas menu? When I put in left position the menu shows all submenu in a column without dropdown effect. What is nessasary to do? How can I appear menu in another posiotion (left) with dropdown effect?

0
7 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #119833

Hi

Thanks for contacting us. Allow me some time please. I need to talk about it with our team then I will let you know.

-Regards.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #119849

If I may....

YouTube tutorial: https://www.youtube.com/watch?v=bl3pDMUjHEc

0
I
iig75
Accepted Answer
2 years ago #119867

It can be real! I saw it youtube link before ask you. The version of template is very old 1.1.2, the describtion is different than now 2.0.13. The classes are missing or different, too. Tell me a tutorial which is actual.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #119877

We don't have - that video was made by one of members, like you.

You have to improvise or use template premium that already have that sidebar.

0
I
iig75
Accepted Answer
2 years ago #121074

What is the name of temlpate premium I use to be?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #121943

For example, Fixter >> https://demo.joomshaper.com/2018/fixter/

0
Pavel
Pavel
Accepted Answer
2 years ago #121953

Hi. In general, this video is 90% relevant, but too complicated. Everything can be done easier. Only CSS is enough. And some interface settings like offcanvas position (OFF for desktop), turning OFF sticky Header and not using Mega Menu

@media (min-width: 992px) {
    .body-innerwrapper {
        width: calc(100% - 210px);
        margin-left: auto;
    }
    .sticky-header-placeholder {
        display: none;
    }
    #sp-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 210px !important;
        height: 100%;
        animation: none !important;
    }
    #sp-header .row {
        flex-direction: column;
    }
    #sp-menu>.sp-column {
        justify-content: start !important;
    }
    .sp-megamenu-parent {
        display: flex !important;
        flex-direction: column;
        margin: 0;
        float: none;
    }
    body.ltr .sp-megamenu-parent>li.sp-has-child>a::after,
    body.ltr .sp-megamenu-parent>li.sp-has-child>span::after {
        content: "\f054";
    }
    body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-right {
        left: 100%;
        top: 0;
    }
}

0