Search code examples
javascriptjqueryhtmlwordpresswp-nav-walker

How to extend script that moves logo into a nav of multiple UL's

I recently set up jQuery script to move a logo into the center of my main nav only at width above 980. It works great on a single unordered list. But when I add several more unordered lists within the nav, it goes haywire. I'm not sure what I am doing wrong here. I can get it to work if I add one more unordered list, but thats as far as I can get it.

Non Working Version: https://codepen.io/robwdev/pen/Ngeewa

Working Version: https://codepen.io/robwdev/pen/zzyyJQ

jQuery:

jQuery(document).ready(function() {

  function addLogoToMiddle() {
    var middle = Math.ceil($(".navbar-nav li").length / 2);
    var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
    $(".navbar-nav li:nth-child(" + middle + ")").after(logoListItem);
  }

  function addLogoToSide() {
    $('#small-screen-logo').append($('#logo-wrapper'));
    // don't forget to remove the list item element from the navbar
    $('#logo-item').remove();
  }

  $(window).resize(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    } else {
      addLogoToSide();
    }
  });

  $(document).ready(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    }
  });

});
Solution

  • You have a few mistakes in html. You need to use a unique identifier for the top-level list. 

    jQuery(document).ready(function() {

  function addLogoToMiddle() {
      var middle = Math.ceil($(".test>li").length / 2);
      var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
      console.log(middle);
      $(".test>li:nth-child(" + middle + ")").after(logoListItem);
  }

  function addLogoToSide() {
      $('#small-screen-logo').append($('#logo-wrapper'));
      // don't forget to remove the list item element from the navbar
      $('#logo-item').remove();
  }

  $(window).resize(function() {
      if ($(window).width() > 980) {
          addLogoToMiddle();
      } else {
          addLogoToSide();
      }
  });

  $(document).ready(function() {
      if ($(window).width() > 980) {
          addLogoToMiddle();
      }
  });

});
    	<div class="dev-nav-wrapper wrapper-fluid wrapper-navbar" id="wrapper-navbar">

<nav class="dev-navbar-tggl navbar navbar-toggleable-md navbar-inverse bg-inverse">

<h2>Not Working</h2>
	
<div class="dev-nav-container container">
<div id="small-screen-logo">
<div id="logo-wrapper">
<!-- Your site title as branding in the menu -->
<a href="http://dev-site/" class="navbar-brand custom-logo-link" rel="home" itemprop="url"><img src="http://oi211.photobucket.com/albums/bb113/182barbie/Fondo-1.png" alt="Logo" height="70" width="100"></a><!-- end custom logo -->
</div>
</div>
<!-- The WordPress Menu goes here -->
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav-nav test">
	<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
		<ul id="main-menu" class="navbar-nav">
			<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
			<a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
			</li>
			<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
			<a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
			</li>
			<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
			<a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
			</li>
			<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17"><a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
			<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186"><a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
			<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"><a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
		</ul>
	</li>
	<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
		<ul id="2nd-menu" class="navbar-nav">
			<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
				<ul id="main-menu" class="navbar-nav">
				<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
				<a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
				</li>
				<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
				<a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
				</li>
				<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
				<a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
				</li>
				<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
				<a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a>
				</li>
				<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
				<a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a>
				</li>
				<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
				<a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a>
				</li>
				</ul>
			</li>
			<!-- <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">	 -->
		</ul>
	</li>
	<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
		<ul id="2nd-menu" class="navbar-nav">
			<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
					<ul id="main-menu" class="navbar-nav">
					<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
					<a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
					</li>
					<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
					<a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a>
					</li>
					<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
					<a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a>
					</li>
					<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
					<a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a>
					</li>
					<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186"><a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a>
					</li>
					<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"><a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a>
					</li>
					</ul>
			      </li>
			<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17"><a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
			<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
		</ul>
	</li>
	<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
		<ul id="2nd-menu" class="navbar-nav">
			<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
				<ul id="main-menu" class="navbar-nav">
					<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
					<a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a></li>
					<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
					<a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a></li>
					<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
					<a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a></li>
					<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
					<a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
					<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
					<a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
					<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
					<a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
				</ul>
		    </li>
		<!-- <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16"> -->
		</ul>
	</li>
	<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
		<ul id="2nd-menu" class="navbar-nav">
		<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
			<ul id="main-menu" class="navbar-nav">
				<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-166">
				<a title="link1" href="http://dev-site/donate/" class="nav-link">link1</a>
				</li>
				<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-165">
				<a title="link2" href="http://dev-site/shop/" class="nav-link">link2</a></li>
				<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-167">
				<a title="link1" href="http://dev-site/jobs-training/" class="nav-link">link3</a></li>
				<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-17">
				<a title="About Us" href="http://dev-site/about-us/" class="nav-link">link4</a></li>
				<li id="menu-item-186" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-186">
				<a title="link5" href="http://dev-site/blog/" class="nav-link">link5</a></li>
				<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-16">
				<a title="link6" href="http://dev-site/resource-center/" class="nav-link">link6</a></li>
			</ul>
		</li>
	    </ul>
    </li>
</ul>
	
</div>						
</div><!-- .container -->
</nav><!-- .site-navigation -->
</div>