So you are looking for a responsive menu, that is, a mobile version of the menu. Most responsive themes will implement such a menu, but there are plugins that you can try if the theme that you are using doesn’t support that feature.
Thanks for the response, I think that is exactly what I was looking for.
I downloaded the Responsive Menu plugin. It said:
Recommended Metaport Tag: <meta name=’viewport’ content=’width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no’ />
OR
[responsive-menu menu=”default”]
What adjustments would I make to header.php to make it show before the “Home” button? Nothing seems to be working.
Header.PHP
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<div class="container header-area">
<?php do_action( 'before' ); ?>
<header id="masthead" class="site-header col-sm-12" role="banner">
<div class="site-branding col-md-6">
<?php if( get_header_image() != '' ) : ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
<h4 class="site-description"><?php bloginfo( 'description' ); ?></h4>
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if( !get_header_image() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h4 class="site-description"><?php bloginfo( 'description' ); ?></h4>
<?php endif; // header image was removed (again) ?>
</div>
<div class="social-header col-md-6">
<?php unite_social(); // Social icons in header ?>
</div>
</header><!-- #masthead -->
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-ex1-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav><!-- .site-navigation -->
<div id="content" class="site-content container">
When I look at your web site, it appears that the theme already has a responsive menu. That is, if you make the width of your browser narrow enough, the mobile menu button shows up. Is the problem, then, that you want the mobile menu button to show up sooner so that the menu items don’t wrap to a second line? All you need to do, then, is add the CSS below using either the theme’s Custom CSS option (if it has one) or using a custom CSS plugin like Jetpack or Custom CSS Manager. Do not edit the theme’s style.css file directly. If you ever have to update the theme, then your changes will be lost.
@media (max-width:992px){
.navbar-nav {display: none;}
}
@media (min-width: 768px) {
.navbar-header .navbar-toggle {display:block}
}
@media (min-width:992px){
.navbar-header .navbar-toggle {display:none}
}
By the way, you have a syntax error at the end of your theme’s style.css file. There’s a function that was added that looks like this:
function register_my_menu(){
register_nav_menu('menu',__('Header Menu'));}
add_action('init', 'register_my_menu');
You cannot add PHP code to a stylesheet and expect it to work.
Thanks on both answers, very very helpful. I appreciate it and implemented the above changes.
One last question. Is there anyway I can move the social media icons to underneath the menu bar if it is minimized?
Thanks again.
I also just noticed that when I click the menu button once it is minimized, nothing happens / no menu shows? Any ideas?
