Problem
- I am looking to integrate the following custom header to a Wordpress site, and have faced some challenges in (1) integrating the javascript smoothly into the header/functions php and (2) having the menu from the website autopopulate into the structure of the custom header. Our website uses the IWEB Business theme. Per recommendations I've seen online, I want to have the js and css files within the child theme, then use the functions php to call them.
What I've tried
- I've had some success making the javascript work by (1) using a plugin which places it into the header and (2) pasting the javascript and css directly into the header php. These are not the smoothest ways of integrating, and I would prefer to have the scripts called and populate from the theme folders.
To do this, I put the following enqueues in the functions php. Like the source code, I then placed respective link for css and script for javascript in the header php head and body. This did not seem to work and call either the javascript or the css.
The second challenge I'm facing is how to integrate our existing menu and navigation with this custom header. Would I need to create a new navigation function in the navigation js? Where in the html source code should this nav element go? Do the nav elements need to be different than those in the Theme code?
Appreciate any help and advice on making this run smoothly!
<----theme header code---->
<div class="inavbar">
<?php if ( function_exists( 'max_mega_menu_is_enabled' ) && max_mega_menu_is_enabled( 'primary' ) ) : ?>
<?php wp_nav_menu( array(
'theme_location' => 'primary',
) ); ?>
<?php else : ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></button>
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav-menu',
) ); ?>
</nav>
<?php endif; ?>
</div>
<----custom header code---->
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Products</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a </li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
<----theme nav javascript---->
/**
* File navigation.js.
*
* @package iwebbusiness
*/
( function() {
var nav = document.getElementById( 'site-navigation' ), button, menu;
if ( ! nav ) {
return;
}
button = nav.getElementsByTagName( 'button' )[0];
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button ) {
return;
}
// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className = 'nav-menu';
}
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
}
};
} )(jQuery);
<----end theme nav javascript---->
function hrzdropdown_scripts (){
//css
wp_enqueue_style( 'hzcomp', get_theme_file_uri( '/inc/css/hzdropcomponent.css' ));
wp_enqueue_style( 'hzdef', get_theme_file_uri( '/inc/css/hzdropdefault.css' ));
//JQuery
wp_enqueue_script('jquery');
wp_enqueue_script('cbpmenu', get_theme_file_uri() . '/js/cbpHorizontalMenu.js', array('jquery'), false, false);
wp_enqueue_script('cbpmenumin', get_theme_file_uri() . '/js/cbpHorizontalMenu.min.js', array('jquery'), false, false);
wp_enqueue_script('modernizr', get_theme_file_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
}
add_action( 'wp_enqueue_scripts', 'hrzdropdown_scripts' );```
[1]: https://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/
[2]: https://github.com/codrops/Blueprint-HorizontalDropDownMenu
[3]: https://wordpress.org/themes/iweb-business/
