Offcanvas Menu Icon is Rendered Twice - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

Offcanvas Menu Icon is Rendered Twice

KD

Keith Doney

Helix Framework 3 years ago

I am using Helix Ultimate 2.0.5 and have made progress creating a custom two-line header. I created a "custom header" using your multi-line header as a starting point.

The "desktop" page works just fine. Strange things happen when I change the page size.

  1. "Tablet" page size (correctly) switches to the mobile/offcanvas menu. It is displayed only once. However, the icon is not right-justified as I would expect. That isn't my main problem but if you happen to know what I'm doing wrong I would appreciate some advice.

  2. The real problem occurs when I change the page to "phone" size. The mobile/offcanvas menu icon is displayed twice (neither of them are right-justified as I would expect). Both icons are fully functional, the only difference being that one of them displays a "Menu" tooltop while the other does not.

When I "inspect" the page the two icons are defined as follows:

<a id="offcanvas-toggler" aria-label="Menu" class="offcanvas-toggler-right d-flex d-lg-none" href="#"><div class="burger-icon" aria-hidden="true"><span></span><span></span><span></span></div></a>

<a id="offcanvas-toggler" aria-label="Menu" title="Menu" class="mega ms-3 offcanvas-toggler-secondary offcanvas-toggler-right d-flex align-items-center ps-2" href="#"><div class="burger-icon"><span></span><span></span><span></span></div></a>

I can't find anything in my custom template code (small tweak to features/menu.php and larger changes to headers/custom_header/default.php).

I found another ticket/question from about a month ago (user "Roman") who seemed to be having the same problem. The resolution at the time was that the template had a bug that needed to be addessed in a future release/update. Until then, some CSS (display:none) would be necessary to supress the "extra" menu icon.

Can you confirm the problem and advise what I should do to patch/correct it?

Thanks,

Keith

0
5 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #49557

Hi there!

Sorry for your issue.

Please use the following code in your custom CSS:

@media (max-width: 991px){
#sp-header.full-header-center #offcanvas-toggler.mega, #sp-header.header-with-modal-menu #offcanvas-toggler.mega, #sp-header.full-header-left #offcanvas-toggler.mega, #sp-header.lg-header #offcanvas-toggler.mega, #sp-header.header-with-social #offcanvas-toggler.mega {
    display: none !important;
}
nav.sp-megamenu-wrapper.d-flex {
    justify-content: end;
    margin: 0;
}
}

Hope this will solve the issue for you!

Note: 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.

Best Regards

0
KD
Keith Doney
Accepted Answer
3 years ago #49566

That did the job just fine, thanks. The offcanvas icon is still not aligned properly in "tablet" mode but it's something I can work with...

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #49979

Glad to know that and you are always welcome:)

0
SB
Steve Babbitt
Accepted Answer
7 months ago #186612

Hi Rashida,

I am also using Helix Ultimate and our site is not passing a website validator because of the two elements with the same id "offcanvas-toggler" -- I can hid them just fine using CSS, but the DOM actully needs to be updated to wither remove one of them or give it a different ID. Is there a fix for this?

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 6 months ago #190837

Hi Steve Babbitt,

Thanks for reaching out. Sorry for the delayed response.

Would you please create a whole new question on this specific topic? We will check and talk about it there.

Best Regards

0