Mobile Menu Full Screen and Parent Item of Submenu Issue

Hello, when I click your site, it says: This site can’t be reached
What mobile menu style do you use?

The url is just an example. It could be example.com It’s under construction currently there is no live version

As I said I use the full screen mobile menu where a parent item has a link and a submenu then the link is not possible to get cliked. Please read my first post to replicate it.

I found an example at your demos. Can you change the mobile menu of this page https://travel.oceanwp.org/ to full screen mobile menu? Then try to click on ADVENTURE and see what happens

Oh yes I didn’t notice the url ??
Yes, with the Full Screen mobile menu style, if you have a submenu, the parent menu become the link to open the sub menu, unfortunately, it is not possible to do something else.

That’s not how submenus work. You have the toggle for this. Parent item has its own link. This affects usability and UX.

Please consider this code if you wish to include it in your next update and update this thread with your outcome

Moreover the code can be further customized to keep the current behavior when the parent li has href=”#” . It makes more sense to toggle the submenu when the parent item doesn’t contain any link

/assets/js/core/fullScreenMobile.js

var $j 		= jQuery.noConflict(),
	$window = $j( window );

$j( document ).on( 'ready', function() {
	"use strict";
	// Full Screen mobile menu
	oceanwpFullScreenMobile();
} );

/* ==============================================
FULL SCREEN MOBILE
============================================== */
function oceanwpFullScreenMobile() {
	"use strict"

	if ( $j( 'body' ).hasClass( 'fullscreen-mobile' ) ) {

		var $mobileMenu 	= $j( '#mobile-fullscreen' ),
			$mobileLink 	= $j( '.mobile-menu' );

		// Close menu function
		var oceanwpFullScreenMobileClose = function( e ) {
			$mobileLink.removeClass( 'exit' );
			$mobileMenu.removeClass( 'active' ).fadeOut( 200 );

			$j( 'html' ).css( {
				'overflow': '',
				'margin-right': '' 
			} );
        	$j( '#mobile-fullscreen nav ul > li.dropdown' ).removeClass( 'open-sub' );
            $j( '#mobile-fullscreen nav ul.sub-menu' ).slideUp( 200 );
            $j( '.mobile-menu > .hamburger' ).removeClass( 'is-active' );
        }

		// Open full screen menu
		$mobileLink.on( 'click', function() {
			$j( this ).addClass( 'exit' );
			$mobileMenu.addClass( 'active' ).fadeIn( 200 );
			$j( '.mobile-menu > .hamburger' ).addClass( 'is-active' );

            var innerWidth = $j( 'html' ).innerWidth();
			$j( 'html' ).css( 'overflow', 'hidden' );
			var hiddenInnerWidth = $j( 'html' ).innerWidth();
			$j( 'html' ).css( 'margin-right', hiddenInnerWidth - innerWidth );
			return false;
		} );

		// Add dropdown toggle (plus)
		$j( '#mobile-fullscreen .menu-item-has-children' ).children( 'a' ).append( '<span class="dropdown-toggle"></span>' );

		// Add toggle click event
		$j( '#mobile-fullscreen nav ul > li.menu-item-has-children > a > span.dropdown-toggle , #mobile-fullscreen nav ul > li.menu-item-has-children > a[href="#"]').on( 'tap click', function() {

            if ( $j( this ).closest( 'li.menu-item-has-children' ).find( '> ul.sub-menu' ).is( ':visible' ) ) {
                $j( this ).closest( 'li.menu-item-has-children' ).removeClass( 'open-sub' );
                $j( this ).closest( 'li.menu-item-has-children' ).find( '> ul.sub-menu' ).slideUp( 200 );
            } else {
                $j( this ).closest( 'li.menu-item-has-children' ).addClass( 'open-sub' );
                $j( this ).closest( 'li.menu-item-has-children' ).find( '> ul.sub-menu' ).slideDown( 200 );
            }

            return false;
        } );
		
		// Close menu
		$j( '#mobile-fullscreen a.close' ).on( 'click', function( e ) {
			e.preventDefault();
			oceanwpFullScreenMobileClose();
		} );

		// Close menu if anchor link
        $j( '#mobile-fullscreen .fs-dropdown-menu li a[href*="#"]:not([href="#"]), #mobile-fullscreen #mobile-nav li a[href*="#"]:not([href="#"])' ).on( 'click', function() {
        	oceanwpFullScreenMobileClose();
	    } );

		// Close on resize
		$window.resize( function() {
			if ( $window.width() >= 960 ) {
				oceanwpFullScreenMobileClose();
			}
		} );

	}

}

• This reply was modified 6 years, 11 months ago by drazon. Reason: Fixed and optimized code
• This reply was modified 6 years, 11 months ago by drazon. Reason: Fixed and optimized code

Hi, you’re right, I will update my code for the next release ??

has this been updated to work like: “It makes more sense to toggle the submenu when the parent item doesn’t contain any link”

baecause it doesn’t seem to be working on mobile. parent link is disabled, but on mobile it still is a pressable link that will take you (in my case) to an empty page.

Hello @ricmetal, if you go to the Header > Mobile Menu section of the customizer and you choose Links as Target, is it work as you want?

fyi first, i’m now testing on desktop, with chrome’s developer tools, setting the view to mobile. my phone went bust yesterday so i’ll have to post-pone testing on mobile (just as a assurance)
anyway:
it works (if link is disabled in menu, then treat parent as toggle) when i set the mobile menu in customizer to “sidebar” and “drop-down”, and the “link as target” like you said. thanks.
but as “full screen”, it doesn’t work like the other menu types. doesn’t even have the option to do “treat link as target”

Hi, it is not possible for the full screen style because of the sub menu, otherwise, they will don’t open anymore.

ok, good to know. thanks for the replies!

You are most welcome ??