WordPress.org

Ready to get started?Download WordPress

Forums

Expound
Responsive vs Mobile : pulldownmenu not working (9 posts)

  1. L.A.J.Schutter
    Member
    Posted 5 months ago #

    Hiy everybody !

    I managed a lot the past few days in building my new website.
    Unfortunately I now discover that the site as a mobile version on smartphones does show the pulldown menu button, but that one is not working as nothing happens when trying to activate this button.

    Is there an easy solution I didn't discover yet ?
    Any help is more than welcome , thanks in advance.
    I do like the Expound theme, please do not make to change

  2. lisamosc
    Member
    Posted 4 months ago #

    I'm having the same issue.

  3. lisamosc
    Member
    Posted 4 months ago #

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

  4. Emdad
    Member
    Posted 4 months ago #

    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.

  5. L.A.J.Schutter
    Member
    Posted 4 months ago #

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

  6. L.A.J.Schutter
    Member
    Posted 4 months ago #

    at our http://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.

  7. L.A.J.Schutter
    Member
    Posted 4 months ago #

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

    https://wordpress.org/support/profile/emdadblog

  8. cmarcc
    Member
    Posted 3 months ago #

    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';
    } )();
  9. redmichael123
    Member
    Posted 3 months ago #

    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

Reply

You must log in to post.

About this Theme

About this Topic