Hi Einder,
What I would suggest to implement the type of menu you want is to create a separate custom style-sheet for all the CSS and load that script from your theme’s functions. That will allow you to keep your original theme almost intact. I say almost because we have to make some tiny little changes in the core files for this to work. Here is how to do it:
1. In your theme folder, create a file called custom-styles.css, open it and paste the following CSS code inside.
2. In that same folder, create a file called custom-functions.php and paste the following PHP code inside. That code will load the CSS scripts that we just created into your theme.
3. In order for the code included in custom-functions.php to work, we need to include it from your theme’s functions.php file. Open it up, and paste the following code at the end of the code:
// Include custom functions for Mantra Theme
include_once (TEMPLATEPATH . '/custom-functions.php');
If you see a ?> symbol at the bottom, paste that code before the symbol (can’t stress that enough).
4. You are gonna have to edit the menu.js file since it controls the scroll-down animation, which you no longer need. Open the file, and insert the following line:
jQuery('#menu-primary ul.sub-menu').css( 'width', jQuery('#menu-primary').width() );
right under the very first line, which is:
jQuery(document).ready(function() {
Then, right under the line you just inserted, type:
/*
and change the last line of code, which looks like this:
}); // ready
to this:
*/
}); // ready
Here is a pastebin of what your menu.js file should look like after those changes.
That should do the job for you. Your submenus will now be horizontal and only appear when their parent menu item is active. If you are planning on having more than two levels in that menu for using it elsewhere, you need to set the depth parameter to 2 when you call it from header.php. The line responsible for calling the menu is:
wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
To add a depth parameter, change it to:
wp_nav_menu( array( 'container_class' => 'menu-header', 'depth' => 2, 'theme_location' => 'primary' ) );
You can style the menu further if you want from custom-styles.css. Don’t forget to use important! (before the semi-colon) for properties that are already set in style.css.
Also, if you don’t want to modify the original theme and instead prefer to create your own child theme, let me know and I’ll give you specific instructions on how to do that.
IMPORTANT: As a precaution, I made it so that the new styles are only visible to logged in admins, in case your site is already live and something goes wrong while you implement this. Once you are confident the menu looks the way you wanted, poen your custom-functions.php, and remove this line:
if ( is_user_logged_in() && current_user_can('administrator') ) {
as well as the curly bracket (}) right under this line:
add_action('wp_enqueue_scripts', 'my_mantra_custom_styles');
Here is a pastebin of what your code should look like after those changes.
Cheers!
