Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Adding a fixed header to mega menu

‎05-25-2021 07:48 AM
‎05-25-2021 07:48 AM

Adding a fixed header to mega menu

Hello, does anyone know how to add a fixed header inside the magento mega menu? We just want text above our categories in our menu to organize them better. Is this possible?

Reply
5 REPLIES 5
‎05-25-2021 10:43 AM
‎05-25-2021 10:43 AM

Re: Adding a fixed header to mega menu

Hello @nickwhawkr4637 ,

 

Can you share more details ?

do you want add any text in category page ? or you want some text in menu only (at where)?

share any sketch file or same sketch for reference.

Problem Solved ? Click on 'Kudos' & Accept as Solution ! Smiley Happy
0 Kudos
Reply
‎05-25-2021 11:55 AM
‎05-25-2021 11:55 AM

Re: Adding a fixed header to mega menu

Like this site when you hover over 'products' and you see 'platform' and 'products' as just text to serve as a header and nothing else. https://instapage.com/Capture.JPG

0 Kudos
Reply
‎05-25-2021 12:05 PM
‎05-25-2021 12:05 PM

Re: Adding a fixed header to mega menu

Hello @nickwhawkr4637 ,

 

Understood your point, your want some headings which will not be clickable, but should show related categories on hovering it.

This is not manageable from Magento admin.

You can create proper categories as per hierarchy and make the first level categories non clickable by editing below php file.

You can add the logic inside 

vendor/magento/module-theme/Block/Html/Topmenu.php

Take reference from here : 

https://community.magento.com/t5/Magento-2-x-Programming/Magento2-1-make-parent-category-link-not-cl...

 

Hope it helps !

Problem Solved ? Click on 'Kudos' & Accept as Solution ! Smiley Happy
0 Kudos
Reply
‎05-25-2021 08:54 PM
‎05-25-2021 08:54 PM

Re: Adding a fixed header to mega menu

Create a custom.js file and place it in your app/design/Custom/theme/web/js folder. Then, from Magento_Theme/layout/default_head_blocks.xml link to your custom JS file like this:

<head>
    <link src="js/custom.js" />
</head>

Alternatively, you can place the link in Admin >> Content >> Configuration >  on the default scope to the right of your theme name click on "edit". Open the HTML head tab and in the "Scripts and Style Sheets" box place your script link.

Inside your custom.js file add the following code:

$(document).ready(
        function() {
   var  mn = $(".page-header");
   var mns = "main-nav-scrolled";

$(window).scroll(function() {
 if( $(this).scrollTop() > 0 ) {
   mn.addClass(mns);
 } else {
   mn.removeClass(mns);
  }
}); 
});

Use css class .main-nav-scrolled to style the fixed menu and add any transitions and animations.

0 Kudos
Reply
‎05-26-2021 06:54 AM
‎05-26-2021 06:54 AM

Re: Adding a fixed header to mega menu

Hello @nickwhawkr4637,

 

Yes easy to customize the design of Mega Menu Extension as of your need. Take a glance on this referred on Mega menu module.


Thank you

Best regards
madhuboots

0 Kudos
Reply