WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Mobile Menu omits drop down sub menu items (7 posts)

  1. webdesignerwp
    Member
    Posted 1 year ago #

    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/

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  3. webdesignerwp
    Member
    Posted 1 year ago #

    Hi Andrew,

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

    function () {
            $(this).children('.flyout').hide();
  4. webdesignerwp
    Member
    Posted 1 year ago #

    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'
        	)
        );
    }
  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    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>
  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Your second function, function bones_mobile_nav()
    Change depth to '2'

  7. webdesignerwp
    Member
    Posted 1 year ago #

    Hi Andrew,

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

Topic Closed

This topic has been closed to new replies.

About this Topic