When the browser width is below 1080px on my WordPress site, I’ve set up a mobile menu with containing an unordered list that is configured via PHP rather than HTML. I have some jQuery code below that adds a span tag after the menu items so that I can use it as a means of toggling sub menus. The problem is, I want to change it so that it only adds the span to list items that have subpages.
jQuery(document).ready(function($) {
$('nav.main-menu#mobile ul li').after('<span class="submenu-button">+</span>');
});
I also have another issue with this â I’ve given certain menu items a custom class (nav.main-menu#mobile li.hide-mobile) so that I can set them to display:none when the menu changes to the mobile menu at 1080px. The jQuery is adding a span for these too, and the one I have at the moment has children so the span will presumably will remain even if I have a fix for the code above. Is there a way of removing the span for this class?
The PHP my menu uses:
function register_menus() {
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Menu', 'theme_wp' ),
'header' => __( 'Header Menu' ),
'footer' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'register_menus' );
My header is as follows:
<header class="header">
<div class="header-navigation">
<!-- LOGOS -->
<a href="http://www.mywebsite.co.uk">
<img class="standard logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo.png">
<img class="white logo" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/logo_white.png"></a>
<!-- END LOGOS -->
<!-- HEADER NAVIGATION MENU -->
<nav class="main-menu" id="header">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-1144" class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li>
<li id="menu-item-463" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
<a href="http://www.mywebsite.co.uk/work/">WORK</a>
<ul class="sub-menu">
<li id="menu-item-584" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li>
<li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473">
<a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a>
<ul class="sub-menu">
<li id="menu-item-478" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li>
<li id="menu-item-477" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li>
</ul>
</li>
<li id="menu-item-475" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li>
<li id="menu-item-480" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li>
</ul>
</li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li>
<li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li>
<li id="menu-item-923" class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
<a href="#">SOCIAL</a>
<ul class="sub-menu">
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li>
<li id="menu-item-924" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="https://www.mywebsite.co.uk/">FLICKR</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="www.mywebsite.co.uk">CONTACT</a></li>
</ul>
</div>
</nav>
<!-- END HEADER NAVIGATION MENU -->
<span class="menu-button"></span>
</div>
<!--END HEADER NAVIGATION -->
<!-- MOBILE NAVIGATION MENU -->
<div class="mobile-menu">
<nav class="main-menu" id="mobile">
<h6 id="titleheading">MENU</h6>
<div class="menu-header-menu-container">
<ul id="menu-header-menu-1" class="menu">
<li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="http://www.mywebsite.co.uk/home/">HOME</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
<a href="http://www.mywebsite.co.uk/work/">WORK</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.mywebsite.co.uk/work/landscapes/">LANDSCAPES</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-473">
<a href="http://www.mywebsite.co.uk/work/seascapes/">SEASCAPES</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.co.uk/work/macro/">MACRO</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.co.uk/work/cities/">CITIES</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.mywebsite.co.uk/work/long-exposure/">LONG EXPOSURE</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.co.uk/work/miscellaneous/">MISCELLANEOUS</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.mywebsite.co.uk/about/">ABOUT</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.mywebsite.co.uk/shop/">SHOP</a></li>
<li class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
<a href="#">SOCIAL</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">FACEBOOK</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="#">INSTAGRAM</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="www.mywebsite.co.uk">FLICKR</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.mywebsite.co.uk/contact/">CONTACT</a></li>
</ul>
</div>
</nav>
<nav class="social-menu" id="mobile">
<div class="menu-social-menu-container">
<ul id="menu-social-menu" class="menu">
<li id="menu-item-948" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-948"><a href="#"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/facebook_icon_white.png" height=30 width=30></a></li>
<li id="menu-item-947" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-947"><a target="_blank" href="www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_black.png" height=30 width=30><img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/instagram_icon_white.png" height=30 width=30></a></li>
<li id="menu-item-949" class="menu-item menu-item-type-c www.mywebsite.co.uk"><img class="social icon grey" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_grey.png" height=30 width=30> <img class="social icon black" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_black.png" height=30 width=30> <img class="social icon white" src="http://www.mywebsite.co.uk/wp-content/uploads/2016/02/flickr_icon_white.png" height=30 width=30></a></li>
</ul>
</div>
</nav>
</div>
<!-- END MOBILE NAVIGATION MENU -->
</header>
You should be able to accomplish it with this:
It will select every
li
that haveul
as achild
insidemobile menu