Responsive vs Mobile : pulldownmenu not working

I’m having the same issue.

Here is my site – in mobile view, the menu does not open when clicked msodsites.com

Can i have your javascript code for this responsive menu ?

Or try this :

1. load your jquery before this code

2. add this below jquery code

jQuery(document).ready(function () {

    // Responsive menu
    $("#site-navigation").addClass("js").before('<div id="menu">?<span id="text">Menu</span></div>');
	$("#menu").click(function(){
		$("#site-navigation").slideToggle();
	});
	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("#site-navigation").removeAttr("style");
		}
	});

});

3. I hope you know the CSS part to style.

I looked around a lot in all different files. This is what I found about MENU, within the RTL-stylesheet (rtl.css file):

/* =Menu
———————————————– */

.navigation-main ul {
list-style: none;
margin: 0;
padding-right: 0;
}
.navigation-main li {
float: right;
position: relative;
}
.navigation-main ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
float: right;
position: absolute;
top: 1.5em;
right: 0;
z-index: 99999;
}
.navigation-main ul ul ul {
right: 100%;
top: 0;
}

@media screen and (max-width: 600px) {
.menu-toggle,
.main-small-navigation ul.nav-menu.toggled-on {
display: block;
}

.navigation-main ul {
display: none;
}
}

.main-small-navigation ul ul a {
padding-right: 60px;
}
.main-small-navigation ul ul ul a {
padding-right: 80px;
}
.main-small-navigation ul > .current_page_item,
.main-small-navigation ul > .current-menu-item {
background: #117bb8;
}
.navigation-main {
background: #3a3a3a;
}
.navigation-main ul {
margin: 0 30px;
}
.navigation-main a {
color: white;
padding: 10px;
position: relative;
}
.navigation-main li {
background: #3a3a3a;
}
.navigation-main li:hover {
background: #474747;
}
.navigation-main ul > .current_page_item,
.navigation-main ul > .current-menu-item,
.navigation-main ul > .current-post-ancestor,
.navigation-main ul > .current-menu-ancestor,
.navigation-main ul > .current-menu-parent,
.navigation-main ul > .current-post-parent {
background: #117bb8;
}
.navigation-main ul > .current_page_item:hover,
.navigation-main ul > .current-menu-item:hover,
.navigation-main ul > .current-post-ancestor:hover,
.navigation-main ul > .current-menu-ancestor:hover,
.navigation-main ul > .current-menu-parent:hover,
.navigation-main ul > .current-post-parent:hover {
background: #138bcf;
}
.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
border-top-color: #138bcf;
}
.navigation-main ul > .current_page_item ~ .current_page_item a,
.navigation-main ul > .current-menu-item ~ .current-menu-item a,
.navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a,
.navigation-main ul > .current-menu-parent ~ .current-menu-parent a,
.navigation-main ul > .current-post-parent ~ .current-post-parent a {
background: #3a3a3a;
}
.navigation-main ul > .current_page_item ~ .current_page_item a:hover,
.navigation-main ul > .current-menu-item ~ .current-menu-item a:hover,
.navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover,
.navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover,
.navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
background: #474747;
}
.navigation-main ul > .current_page_item a:after,
.navigation-main ul > .current-menu-item a:after,
.navigation-main ul > .current-post-ancestor a:after,
.navigation-main ul > .current-menu-parent a:after,
.navigation-main ul > .current-post-parent a:after {
content: ”;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 6px solid #117bb8;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
bottom: -6px;
left: 50%;
margin-left: -6px;
z-index: 9995;
}
.navigation-main ul > .current_page_item ~ .current_page_item a:after,
.navigation-main ul > .current-menu-item ~ .current-menu-item a:after,
.navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:after,
.navigation-main ul > .current-menu-parent ~ .current-menu-parent a:after,
.navigation-main ul > .current-post-parent ~ .current-post-parent a:after,
.navigation-main ul ul li a:after {
content: ”;
border: none !important;
}
.navigation-main ul ul {
margin: 0;
top: 40px;
z-index: 9990;
}
.navigation-main ul.social {
padding: 0;
list-style: none;
float: right;
margin-right: 36px;
/* -4px bc of padding */
}
.navigation-main ul.social li:hover {
background: none;
}
.navigation-main ul.social li a {
width: 24px;
padding-left: 0;
padding-right: 0;
background: url(‘../images/social.png’) 0 50% no-repeat;
color: transparent;
text-indent: -9999px;
padding-left: 4px;
opacity: 0.2;
}
.navigation-main ul.social li a:hover {
opacity: 0.5;
}
.navigation-main ul.social li.twitter a {
background-position: -205px 50%;
}
.navigation-main ul.social li.facebook a {
background-position: -12px 50%;
}
.navigation-main ul.social li.feed a {
background-position: -108px 50%;
}
.navigation-main ul.social li.vkontakte a {
background-position: -59px 50%;
}
.navigation-main ul.social li.google-plus a {
background-position: -157px 50%;
}
.site-header .menu-toggle {
background: #3a3a3a;
color: white;
font: 13px/20px “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-weight: 300;
padding: 10px 22px;
margin: 0;
}
.site-header .menu-toggle:hover {
background: #474747;
}
.site-header .menu-toggle:before {
content: ‘\2261’;
font-size: 14px;
margin-right: 10px;
}

at our https://www.StichtingMOL.com website the navigation menu is changing when shown own a smaller screensize of a mobile display. This is also responsively happening when resizing the browser window on a monitor.

The full navigation menu (more menu text items) disappear and a ” = menu ” comes instead. Unfortunately, this is NOT working : when activated there is no pulldown menu showing.

I am not sure how to solve this issue as the customer really likes the Expound theme so far.

@emdad thanks for your suggestion. I tried but so far no change at all.

https://www.ads-software.com/support/profile/emdadblog

In Expound > js > navigation.js try replacing the current code with:

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
	var container = document.getElementById( 'site-navigation' ),
	    button    = container.getElementsByTagName( 'h1' )[0],
	    menu      = container.getElementsByTagName( 'ul' )[0];

	if ( undefined == button || undefined == menu )
		return false;

	button.onclick = function() {
		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
			menu.className = 'nav-menu';

		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
			container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
			container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
		}
	};

	// Hide menu toggle button if menu is empty.
	if ( ! menu.childNodes.length )
		button.style.display = 'none';
} )();

Hello Everybody,
I face excactly the same problem on our website naikunaiku.de. I really appreciate your help and suggestions.
I replaced navigation.js but it didn’t work. Are further prerequisites required?
Thanks
Michael