Topbar Navigation Menu

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

Preview PHP CSS

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

Click to copy

/**
 * 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' );
}

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

Click to copy

/**
 * 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' );

Add to child theme style.css file

Click to copy

/* 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;
	}
}

by Alex Last updated: October 18, 2020

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.

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart

Start building your website with MD now

Get started with MD today. Pay once for use on unlimited websites.
* Save 40% on license key renewals every 12 months. Get auto-updates sent to 5 websites.

Get MD Now