Staff replied Helix Framework

moving Offcanvas Toggler in custom header

Asked by Andrea 4 years ago Last activity 4 years ago

Hi,
I set a custom header on HU 2 with the logo right aligned on the right and the menu left aligned on the left.

This two do the job:

#sp-menu >.sp-column {justify-content: flex-start !important;}
#sp-logo >.sp-column {justify-content: flex-end;}

But I can't move the burger menu on the left as well as the mega menu. What's wrong with

#offcanvas-toggler >.sp-column {justify-content: flex-start !important;}

Here is the site -> https://martalonardi.it/

Thank you to anyone who can give me a hint!
Andrea

10 replies

Mehtaz Afsana Borsha Staff

4 years ago

Thanks for contacting us. Could you please give me a screenshot of that portion?

-Regards.

Andrea Asked this

4 years ago

Sure,
here is the megamenu correctly working.

Here the offcanvas toggler (red arrow) that I'd like on the left (green arrow).

Thank you

Mehtaz Afsana Borsha Staff

4 years ago

You can use this custom CSS


@media (max-width: 767px){
.burger-icon {
    position: relative;
    right: 160px;
}
}
@media only screen and (max-width: 1180px) and (min-width: 768px)  {
.burger-icon {
    position: relative;
    right: 460px !important;
}
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Andrea Asked this

4 years ago · edited

The burger menu is fine now, but the X in offcanvas isn't showing up correctly (it worked fine before adding the custom css you suggested).

Can you please fix this issue as well?

Thank you
Andrea

Mehtaz Afsana Borsha Staff

4 years ago

Sorry for this inconvenience. Could you please give me your super admin access on the hidden content so that I can check?

Mehtaz Afsana Borsha Staff

4 years ago

Sorry for this inconvenience. Could you please give me your super admin access on the hidden content so that I can check?

Andrea Asked this

4 years ago

Yep

Mehtaz Afsana Borsha Staff

4 years ago

Use this custom CSS



@media (max-width: 850px){
body.ltr #offcanvas-toggler.offcanvas-toggler-left{
    margin-right:120px !important;
}
}

Andrea Asked this

4 years ago

Hi,
I tried but didn't work.
I chose for not showing the X using this custom code:

.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span 
{ display: none !important;}

By the way, on mobile the toggle bar is fine, on tablet right: 460px is too much,

@media only screen and (max-width: 1180px) and (min-width: 768px)  {
.burger-icon {
    position: relative;
    right: 480px !important;
}
}

is a little bit better on many devices. There is a way to make it aligned on the left instead of setting a relative position?

Mehtaz Afsana Borsha Staff

4 years ago

I think its also ok if you put it like this

https://prnt.sc/GINLfPb3Kzlg

And if you want to reduce then just reduce the number right: 480