Topbar Navigation Menu
Add a new top menu bar to your site and edit it from the WordPress menus editor.
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' );
}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' );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;
}
}
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.
SEE WHAT'S NEW IN MD
The Next New Version of Marketers Delight is Almost Here…
There's always something new in the works here in the MD Labs. Join the email list to get the newest updates, snippets, and videos sent straight to your e-mail inbox. *
by