Top horizontal menu in displayNav hook

Today i want to show you how to move default Top horizontal menu module to displayNav hook. By default, you can move this module there but unfortunately - whole menu doesnt work well there. It's because of missed js and css libraries. So, in this guide i want to show you step by step how you can fix that.

Transplanting module to displayNav hook

We must transplant module to displayNav section. in this case go to modules > positions tab in your back office. On the top right window part you can see anchor icon with "transplant a module" text. Click on it and you will see form where you have to:

1. from first dropdown named "Module" select: Top horizontal menu
2. from second dropdown named "Hook into" select "displayNav (Navigation)"

transplanting top horizontal menu module to new hook

Don't configure all other fields - it's not necessary. You have to select correct values only from these two select boxes and that's all. After that - click on "save" button below the form. You will see message with confirmation - now your menu module is correctly transplanted to displayNab hook.

Unhooking module from old position: displayTop

Okay, now it's time to unhook module from old position. In this case go to modules > positions tab in back office and search for list of modules named "displayTop". Near the "Top horizontal menu" module click on dropdown icon, then select unhook. That's all. After unhooking you will see message with confirmation.

Unhooking Top horizontal menu module from displayTop hook

Modification of blocktopmenu.php file

Now it's time to modify module file. It's necessary, because without modification menu feature will work without js scripts and css styles - it will be totally useless. So, open module file: /modules/blocktopmenu/blocktopmenu.php and before last closing bracket paste this code:

    public function hookdisplayHeader($params){
        $this->context->controller->addJS($this->_path.'js/hoverIntent.js');
	$this->context->controller->addJS($this->_path.'js/superfish-modified.js');
	$this->context->controller->addJS($this->_path.'js/blocktopmenu.js');
	$this->context->controller->addCSS($this->_path.'css/blocktopmenu.css');
	$this->context->controller->addCSS($this->_path.'css/superfish-modified.css');
    }

Save changes in file. 

Transplanting module to displayHeader section.

Go back to the back office, open section: modules > positions and click on anchor icon (go to transplant a module section). From first dropdown select Top Horizontal Menu and from second select displayHeader. Save changes. that's all. your modification is ready!

Effect of our modifications