Uno jili casino login registration,Slot gaming online philippines.REGISTER NOW GET FREE 888 PESOS REWARDS!

(@didoh)

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

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Museum
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri(). '/assets/js/html5shiv.js' ); ?>"></script>
<![endif]-->

</head>

<body <?php body_class(); ?>>
<nav id="site-navigation" class="main-navigation" role="navigation">
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'secondary',
					'container_class' => 'secondary-menu'
				) );

                wp_nav_menu( array(
					'theme_location'  => 'social',
					'container_class' => 'social-menu',
					'fallback_cb' => false
				) );
			?>
		</div>
	</nav><!-- #site-navigation -->

<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<?php $header_position = get_theme_mod( 'header_position', 'right' ); ?>
		<div class="site-branding text-<?php echo esc_attr( $header_position ); ?>">

			<?php if ( get_header_image() ) : ?>
			<div class="site-logo">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
				<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>">
				</a>
			</div>
			<?php endif; // End header image check. ?>

			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

		</div>
	</header><!-- #masthead -->
<nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle"><?php _e( 'Menu', 'museum' ); ?></button>
		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'museum' ); ?></a>
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'primary',
					'container_class' => 'main-menu'
				) );

                wp_nav_menu( array(
					'theme_location'  => 'mobile',
					'container_class' => 'mobile-menu',
                    'fallback_cb' => false
				) );
			?>
		</div>

	</nav><!-- #site-navigation -->

	<div id="content" class="site-content">

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

WPyogi

(@wpyogi)

9 years, 11 months ago

You should not be modifying theme files – any changes will be lost when the theme is updated. Use a child theme instead.

https://codex.www.ads-software.com/Child_Themes

Can’t tell anything from looking at code…

WPyogi

(@wpyogi)

9 years, 11 months ago

A link to your site might be useful, BTW.

Thread Starter

DidoH

(@didoh)

9 years, 11 months ago

Thanks WPyogi. I will create a child theme for it. The site is https://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

(@crouchingbruin)

9 years, 11 months ago

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 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

(@didoh)

9 years, 11 months ago

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

(@didoh)

9 years, 11 months ago

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

(@wpyogi)

9 years, 11 months ago

I’d really suggest that you start a new thread on the forum for this theme:

https://www.ads-software.com/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

(@didoh)

9 years, 11 months ago

Thanks WPYogi. I will try that.

Thread Starter

DidoH

(@didoh)

9 years, 11 months ago

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.

<nav id="secondary-site-navigation" class="main-navigation" role="secondary">
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'secondary',
					'container_class' => 'secondary-menu'
				) );

                wp_nav_menu( array(
					'theme_location'  => 'social',
					'container_class' => 'social-menu',
					'fallback_cb' => false
				) );
			?>
		</div>

I was then trying to make the primary menu disappear in the responsive menu so that only the mobile menu appeared. I tried the following, but nothing worked. The primary menu was still appearing.

/* =Responsive
----------------------------------------------- */
@media screen and (min-width: 600px) {

	.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 .secondary-menu,
  .main-navigation .social-menu {
    display: none;
  }

  .main-navigation .primary-menu {
    display: none;
  }

  .main-navigation .mobile-menu {
    display: block;
  } 

.menu-toggle,
  .main-navigation .mobile-menu.toggled .nav-wrapper ul {
    display: block;
  }
.menu-toggle,
  .main-navigation .primary-menu.toggled .nav-wrapper ul {
    display: none;
  }

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

and in my header.php

<nav id="site-navigation" class="main-navigation" role="navigation">
		<button class="menu-toggle"><?php _e( 'Menu', 'museum' ); ?></button>
		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'museum' ); ?></a>
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'mobile',
					'container_class' => 'mobile-menu',
					'fallback_cb' => false
				) );
			?>
        </div>
            <nav id="primary-site-navigation" class="main-navigation" role="primary">
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'primary',
					'container_class' => 'primary-menu'
				) );
			?>
		</div>

Do you have any suggestions?

WPyogi

(@wpyogi)

9 years, 11 months ago

Let’s continue this in the theme’s forum:

https://www.ads-software.com/support/topic/child-theme-not-working-34?replies=5

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

The topic ‘Museum theme responsive menu toggle not working’ is closed to new replies.

Museum theme responsive menu toggle not working

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics