How to add a top menu above main navigation?

[larryhir]

I would like to include some additional links in a small top menu above primary menu just below a slogan on the right. Can you advise?

Topic

[Jason Bobich]

Hello,

This would be a customization you’d need to make from your child theme’s functions.php.

Here is a map of all your available action hooks. You’d pick the location appropriate to where you’re wanting to hook into.

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

Here’s an explain on how action hooks work in general:

http://dev.themeblvd.com/tutorial/actions/

And here is how to register a nav menu location in WordPress:

http://codex.wordpress.org/Function_Reference/register_nav_menu

And here’s how to output it:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

[champa9ne]

Hi Jason,

Thanks so much for this post!

I’m having a bit of trouble with my custom secondary menu. After making an update, and removing my additional child theme files, I’m having trouble getting my top navigation (in the themeblvd_header_above_default) to reappear.
Ideally, I’d like to remove the contact bar and header text and have a top nav above that area, with text in white.

https://www.skilven.com/

Here is my child theme functions.php custom code:

function themeblvd_custom_top_content () {
	?>
	<?php
}
add_action( 'themeblvd_header_above_default', 'themeblvd_custom_top_content' ); 

register_nav_menu( 'secondary', 'Secondary Navigation' );
?>

<?php function themeblvd_custom_header_addon_content() {
	?>
<div style=" float:right; position: relative; display: inline;"><?php wp_nav_menu( array(
 'container_class' => 'secondary-menu', 'theme_location' => 'secondary' ) ); ?>	
	</div>
	<?php
}

/* Remove all other actions and add in our custom function */
function themeblvd_custom_header_addon() {
	remove_all_actions( 'themeblvd_header_addon' ); // Remove all other other actions
	add_action( 'themeblvd_header_addon', 'themeblvd_custom_header_addon_content' ); // Add our custom function
}

—————–

And my CSS for the top nav (in the child theme CSS file):

.secondary-menu ul li{
	display: inline;
}

.secondary-menu .menu-item {
	color: white;
}

.secondary-menu ul li a{
	display: inline;
	font-size: 1.05em;
	color: #F6F6F6;
	margin: .8em;
}

.secondary-menu ul li a:hover {
	text-decoration: underline;
}

ul.secondary-menu {
	list-style-type:none;
}

.secondary-menu ul#menu-top-navigation{
	list-style-type:none;
	color: #FFFFFF;
	display: inline;
	margin: 3em 0em 1em 0em;
}

ul#menu-top-navigation{
	display: inline;
}

li#menu-item-59{
	color: #FFFFFF;
}

.secondary-menu #navmenu ul {margin: 5em; padding: 1em;
	list-style-type: none; list-style-image: none; 
}

.secondary-menu #navmenu li{
display: inline;
	font-size: 1.25em;
font-weight: bold;
	line-height: 1.15em;
	margin: 1em 0 1em 0;
}

———————————–

Any help you can give is greatly appreciated!

Thanks!

[Jason Bobich]

Let’s step back a bit. You’ve got a lot of things mixed up in your code above.

===========

The setup of your child theme’s functions.php

Make sure the top of your child theme’s functions.php looks like this:

https://github.com/themeblvd/Child-Themes/blob/master/akita-child/functions.php

===========

Your customization

Now, when you call add_action(), the first variable you’re passing in is the name of the action hook itself. And the second variable is the name of your function.

https://codex.wordpress.org/Function_Reference/add_action

Here are the names of all action hooks:

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

So, the name of the action hook you want to use is themeblvd_header_above, not themeblvd_header_above_default, which is the name of a function the framework is hooking there.

Try not to just copy and paste things. I think that’s getting you into trouble. Really look at what you’re putting in and make sure you understand it. I know it’s faster now to just “get it to work” but once you take that mental step and truly understand these concepts, it’ll open a ton of possibilities for you, which is a very rewarding feeling. And then it will save you more time in the long run.

So, with these changes, your above code should look more like this:

/**
 * Register your nav menu
 */
register_nav_menu( 'secondary', 'Secondary Navigation' );

/**
 * My callback function for themeblvd_header_above
 */
function my_header_above() {
	?>
	<div style="float:right; position: relative; display: inline;">
		<?php wp_nav_menu( array('container_class' => 'secondary-menu', 'theme_location' => 'secondary' ) ); ?>
	</div>
	<?php
}

/**
 * Hook my callback to themeblvd_header_above
 */
add_action( 'themeblvd_header_above', 'my_header_above' );

/**
 * Remove the default function from themeblvd_header_above
 */
remove_action( 'themeblvd_header_above', 'themeblvd_header_above_default' );

Note: If you want to put a block of code here in the forums use <pre> HTML tags. Use <code> HTML tags for a little piece of code inline with your text like this.

[champa9ne]

Hi Jason,

I wanted to say a huge thank you for your detailed instructions. PHP edits are completely new/foreign to me, so I don’t think I completely understood the hooks and actions previously. Thanks for you code suggestion. After having difficulties displaying the links of the secondary menu items, I opted to insert a button in the ‘my_header_above’ section, which is working well.

Thanks so much for your help!

[Author]

Replies