Topbar Navigation Menu

Add a new top menu bar to your site and edit it from the WordPress menus editor.

Preview PHP HTML CSS
Click to copy

Add to functions.php (easy) or merge into loader.php (intermediate)

/**
 * Manipulate templates.
 *
 * @since 1.0
 */

function md_child_templates() {

	// Top Bar
	if ( md_has_menu( 'header' ) )
		add_action( 'md_hook_before_html', 'md_child_topbar' );

}
add_action( 'template_redirect', 'md_child_templates' );

// Topbar template

function md_child_topbar() {
	include( 'templates/topbar.php' );
}
Click to copy

Add to functions.php (easy) or merge into existing after_setup_theme hook (intermediate)

/**
 * Register Top Bar navigation menu and other
 * after setup theme actions.
 *
 * @since 1.0
 */

function md_child_setup() {
	register_nav_menus( array(
		'topbar' => __( 'Top Bar', 'md-child' )
	) );
}
add_action( 'after_setup_theme', 'md_child_setup' );
Click to copy

Create templates/topbar.php file in child theme and paste:

<div class="topbar">
	<div class="inner">
		<nav class="topbar-menu" itemscope itemtype="http://schema.org/SiteNavigationElement">
			<?php wp_nav_menu( array(
				'theme_location' => 'topbar',
				'container'      => false,
				'fallback_cb'    => false,
				'menu_class'     => 'menu menu-topbar',
				'walker'         => new md_menu_walker( true, false )
			) ); ?>
		</nav>
	</div>
</div>
Click to copy

Add to child theme style.css file

/* TOPBAR */

.featured-image-cover .topbar {
	background-color: transparent;
	border-bottom-color: rgba(0, 0, 0, 0.3);
}

.topbar {
	background-color: #fff;
	border-bottom: 1px solid #ececec;
	font-size: 16px;
	position: relative;
	z-index: 98;
}

.topbar a { color: #444; }
.topbar a:hover { color: #2e2e2e; }

.topbar .menu-item a { padding: 6px 13px; }
.topbar .menu-item:last-child a { padding-right: 0; }
.topbar .menu-item:not(.current-menu-item):first-child a { padding-left: 0; }

@media all and (min-width: 1000px) {
	.topbar-content {
		float: left;
		padding-top: 7px;
	}
	.topbar-menu { float: right; }
}

@media all and (max-width: 1000px) {
	.topbar .menu-item { display: inline-block; }
	.topbar .menu-item:not(:last-child) { border-bottom: 0; }
	.topbar .menu-item a {
		font-size: 13px;
		padding: 6px 2px;
	}
}

Topbar navigation menu preview WordPress

How to Add a Top Bar Navigation With Menu Item Controls

Use this code snippet to add an integrated topbar menu to every page of your site. The template area is open for all kinds of customization and the menu easily hooks into the existing WordPress Menus editor for easy access once installed and configured properly.

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.