cancel
Showing results for 
Search instead for 
Did you mean: 

Adding a fixed header to mega menu

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?

5 REPLIES 5

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

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

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

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.

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