Title: Museum theme responsive menu toggle not working Last modified: August 24, 2016 --- # Museum theme responsive menu toggle not working * [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 5 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/) * Hi there, * My mobile menu toggle isn’t responding when you click on it. I have been editing the code in the header.php, functions.php and style.css and am fairly sure it has something to do with the code in my header.php, but haven’t been able to find out what’s wrong. * The header.php is below * ``` section and everything up till
* * @package Museum */ ?> > >
``` Viewing 10 replies - 1 through 10 (of 10 total) * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [11 years, 5 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023094) * You should not be modifying theme files – any changes will be lost when the theme is updated. Use a child theme instead. * [https://codex.wordpress.org/Child_Themes](https://codex.wordpress.org/Child_Themes) * Can’t tell anything from looking at code… * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [11 years, 5 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023096) * A link to your site might be useful, BTW. * Thread Starter [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023251) * Thanks WPyogi. I will create a child theme for it. The site is [http://www.wp.julialloydgeorge.com](http://www.wp.julialloydgeorge.com). The style.css is below * ``` /* Small menu */ .menu-toggle { display: none; padding: 20px; width: 100%; text-align: center; font-family: Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif; font-size: 30px; font-size: 1.875rem; font-weight: normal; line-height: 1.5; background: transparent; border: 0; color: #455353; } .menu-toggle:focus { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); outline: none; } /* =Responsive ----------------------------------------------- */ @media screen and (min-width: 500px) { .main-navigation .mobile-menu { display: none; } } @media screen and (max-width: 1000px) { body.blog .entry-title:after, body.archive .entry-title:after { content: ' \203A'; } body.blog .entry-excerpt, body.archive .entry-excerpt { display: none; } } @media screen and (max-width: 800px) { body.single .hentry, body.page .hentry, body.search-results .site-main, body.search-no-results .site-main, body.error404 .site-main, .comments-area, .single .navigation, .page .navigation { margin-right: 40px; margin-left: 40px; } } @media screen and (max-width: 700px) { body.blog .no-image:before, body.archive .no-image:before { padding-top: 0; } body.blog .no-image .post-link, body.archive .no-image .post-link, body.blog .no-image .entry-header, body.archive .no-image .entry-header { position: relative; top: auto; left: auto; bottom: auto; right: auto; } } @media screen and (max-width: 500px) { body.single .hentry, body.page .hentry, body.search-results .site-main, body.search-no-results .site-main, body.error404 .site-main, .comments-area, .single .navigation, .page .navigation { margin-right: 0px; margin-left: 0px; } main-navigation .primary-menu, main-navigation .secondary-menu, main-navigation .social-menu { display: none; } .main-navigation .mobile-menu { display: block; } body.blog .with-image:hover .entry-header, body.archive .with-image:hover .entry-header { opacity: 0; } .entry-title { font-size: 22px; font-size: 1.375rem; } .entry-excerpt, .read-more { display: none !important; } .comment ul.children { margin-left: 10px; } .two-column .sidebar { float: none; width: 100%; } } @media screen and (max-width: 400px) { .site-content, .secondary-content { padding-right: 20px; padding-left: 20px; } body.blog .hentry, body.archive .hentry { margin-top: 20px; margin-bottom: 20px; width: calc(50% - 10px); } body.blog .hentry .entry-header, body.archive .hentry .entry-header { padding: 10px; } .alignright, .alignleft { display: block; float: none; width: 100% !important; margin-left: 0; margin-right: 0; } .entry-meta .entry-author { margin-bottom: 10px; } .entry-meta .entry-author, .entry-meta .entry-taxes { display: block; float: none; max-width: 100%; text-align: left; } .entry-meta .entry-categories, .entry-meta .entry-tags { display: block; margin-bottom: 10px; } .entry-meta .entry-categories .genericon, .entry-meta .entry-tags .genericon { margin-left: 0; } .comments-title, .comment-reply-title { font-size: 22px; font-size: 1.375rem; } } ``` * This is the functions.php. I have created the secondary and the mobile menu and moved the secondary and social menu to a different location to the primary menu. * ``` // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => __( 'Primary Menu', 'museum' ), 'social' => __( 'Social Links', 'museum' ), 'secondary' => __( 'Secondary Menu', 'museum' ), 'mobile' => __( 'Mobile Menu', 'museum' ), ) ); ``` * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023313) * The problem is that you’ve modified the theme to the point where the Javascript which handles the menu toggling can’t find the elements it needs to change. That is, the [navigation.js](http://wp.julialloydgeorge.com/wp-content/themes/museum/assets/js/navigation.js?ver=0.1.7) file, which controls the toggling of the menu, is looking for specific elements defined by the theme, and it looks like you’re trying to add in your own mobile menu, so the Javascript isn’t working with it. * Thread Starter [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023316) * Thanks CrouchingBruin. I will try swapping the primary and mobile menus around so that the mobile menu is called the primary (original responsive) menu and see if that works. * Thread Starter [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023318) * Hi WPYogi, I just created a child theme version of it and my adapted header.php isn’t working on the child theme. Do I need to add any code at the top to make it appear? Does it matter if the parent theme still includes my changes even though it isn’t activated? * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023319) * I’d really suggest that you start a new thread on the forum for this theme: * [https://wordpress.org/support/theme/museum](https://wordpress.org/support/theme/museum) * And yes, you need to reinstall the parent theme so there are no changes in it– after you’ve moved any changes to the child theme. * Thread Starter [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023320) * Thanks WPYogi. I will try that. * Thread Starter [DidoH](https://wordpress.org/support/users/didoh/) * (@didoh) * [11 years, 4 months ago](https://wordpress.org/support/topic/museum-theme-responsive-menu-toggle-not-working/#post-6023327) * Hi CrouchingBrain, I found a work around to make the javascript overlook my top navigation bars so that only the bottom two navigation bars appeared in the responsive mobile menu. I did this by changing the role from “navigation” and the nav-id from “site-navigation” of the top navigation bars. * ```