Title: Minimize Window
Last modified: August 31, 2016

---

# Minimize Window

 *  [optionwarriors](https://wordpress.org/support/users/optionwarriors/)
 * (@optionwarriors)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/)
 * I have seen several WordPress websites have some code that upon the page becoming
   minimized, the main menu stops showing all of the items and in its place says“
   Menu” with a drop down to prevent the problem.
 * Anyone know how to implement this? In case you are not following me, the this
   is the problem:
 * Looks correct (full screen): [http://postimg.org/image/skh8illan/](http://postimg.org/image/skh8illan/)
   
   Incorrect (minimized): [http://postimg.org/image/omtyt6yhb/](http://postimg.org/image/omtyt6yhb/)
 * Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6906915)
 * 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](https://wordpress.org/plugins/search.php?q=responsive+menu)
   if the theme that you are using doesn’t support that feature.
 *  Thread Starter [optionwarriors](https://wordpress.org/support/users/optionwarriors/)
 * (@optionwarriors)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6906952)
 * 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">
       ```
   
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6906997)
 * 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](http://wordpress.org/plugins/custom-css-manager-plugin/).
   _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.
 *  Thread Starter [optionwarriors](https://wordpress.org/support/users/optionwarriors/)
 * (@optionwarriors)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6907033)
 * 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.
 *  Thread Starter [optionwarriors](https://wordpress.org/support/users/optionwarriors/)
 * (@optionwarriors)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6907034)
 * I also just noticed that when I click the menu button once it is minimized, nothing
   happens / no menu shows? Any ideas?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Minimize Window’ is closed to new replies.

 * 5 replies
 * 2 participants
 * Last reply from: [optionwarriors](https://wordpress.org/support/users/optionwarriors/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/minimize-window/#post-6907034)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
