mega menu - adding closing cross

Follow

Javier Enciso

• May 09, 2020 14:34

using pearl theme with a customized childtheme. Switching to use Weltpixel mega menu.
Need to use a closing cross for mobile menu. Is this included? How do I enable it?

if not: how should I add it in my custom theme...? any help accepted

thank you

0

• Official comment

  

  Support

  • June 15, 2020 15:44

  The Mega Menu extension doesn't come with options that can be used to achieve this out of the box. The module uses the default Magento Mobile Menu, with no customizations applied to that.

  Adding a new icon would be a more complex customization task, and it's best looked into with a developer, however, a nice, simpler alternative you could implement would be to use a bit of custom CSS to replace the Hamburger Icon displayed when the menu is opened in mobile mode with an "X" icon or something similar. This would involve targeting the before element that contains the icon in the wp_custom.less file found in app/design/frontend/Pearl/weltpixel_custom/web/css/source and defining a new icon. Something like this should work:

  .nav-open .nav-toggle::before {
  content: '\e616';
  }

  After adding the code, make sure you regenerate the LESS/CSS files and flush all your available caches from the Cache Management section in the Magento Admin. 

  If anyone else has any alternatives to this solution, feel free to share! 

  Comment actions Permalink

Please sign in to leave a comment.