WordPress.org

Support

Support » Themes and Templates » [Resolved] Mobile Menu omits drop down sub menu items

[Resolved] Mobile Menu omits drop down sub menu items

  • Good Morning,

    I built a website using this framework:
    http://320press.com/wp-foundation/

    I used this framework because I was familiar with foundations and found it easy to use. The problem that I’m having with this website is that the dropdown items below about do not generate in the mobile view.

    I’ve tried a number of things including playing around with the javascript files. I thought that this might be the culprit, but I am not at all well versed in javascript.

    ;(function ($, window, undefined) {
      'use strict';
    
      $.fn.foundationNavigation = function (options) {
    
        var lockNavBar = false;
        // Windows Phone, sadly, does not register touch events :(
        if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
          $(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
            e.preventDefault();
            var flyout = $(this).siblings('.flyout').first();
            if (lockNavBar === false) {
              $('.nav-bar .flyout').not(flyout).slideUp(500);
              flyout.slideToggle(500, function () {
                lockNavBar = false;
              });
            }
            lockNavBar = true;
          });
          $('.nav-bar>li.has-flyout', this).addClass('is-touch');
        } else {
          $('.nav-bar>li.has-flyout', this).hover(function () {
            $(this).children('.flyout').show();
          }, function () {
            $(this).children('.flyout').hide();
          });
        }
    
      };
    
    })( jQuery, this );

    I also added a new menu using the function register_my_menus() so that I could build a separate mobile menu with all pages on the same level, but I’m not familiar enough with the way that the original menu is being generated to make the new dedicated mobile nav function.

    I appreciate any suggestions you may have.
    Thanks.

    Site Link: http://greenhousegraphix.com/angelshands/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Which function is generating the mobile version menu? That function isn’t including the child pages in the menu.

    Hi Andrew,

    I thought that this was the problem, but I’m not entirely sure:

    function () {
            $(this).children('.flyout').hide();

    Here is some additional code:

    function bones_main_nav() {
    	// display the wp3 menu if available
        wp_nav_menu(
        	array(
        		'menu' => 'main_nav', /* menu name */
        		'menu_class' => 'top-nav nav-bar hide-for-small',
        		'theme_location' => 'main_nav', /* where in the theme it's assigned */
        		'container' => 'false', /* container tag */
        		'fallback_cb' => 'bones_main_nav_fallback', /* menu fallback */
        		'depth' => '2',
        		'walker' => new description_walker()
        	)
        );
    }
    
    function bones_mobile_nav() {
    	// display the wp3 menu if available
        wp_nav_menu(
        	array(
        		'menu' => 'mobile_nav', /* menu name */
        		'menu_class' => 'side-nav tabs vertical',
        		'theme_location' => 'main_nav', /* where in the theme it's assigned */
        		'container_class' => 'mobile-nav-container', /* container tag */
        		'fallback_cb' => 'bones_main_nav_fallback', /* menu fallback */
        		'depth' => '1'
        	)
        );
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Hi Andrew,

    I thought that this was the problem, but I’m not entirely sure:

    function () {
    $(this).children(‘.flyout’).hide();

    There are no children to hide, the HTML is as follows;

    <ul id="menu-top-nav-1" class="side-nav tabs vertical">
     <li><a title="Home" href="http://320press.com/wp-foundation/">Home</a> </li>
     <li class="active"><a title="Features" href="http://320press.com/wp-foundation/features/">Features</a></li>
     <li><a href="http://320press.com/wp-foundation/blog/">Blog</a></li>
    </ul>
    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Your second function, function bones_mobile_nav()
    Change depth to ‘2’

    Hi Andrew,

    Thank you so much. I wish I had posted this sooner!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Mobile Menu omits drop down sub menu items’ is closed to new replies.
Skip to toolbar