Mobile Menu: add “drop-down arrow” for menu items with sub-menus

Hi there,

It is indeed possible to add a drop-down arrow for the mobile menu with a little custom CSS inserted into the bottom of your child theme’s style.css file:

@media only screen and (max-width: 960px) {

	/* This adds an arrow to menu items that have sub-items in mobile views. */
	.page_item_has_children a::after {
	    display: inline-block;
	    width: 100%;
	    position: relative;
	    top: -.2em;
	    margin-left: 1em;
	    content: 'v';
	    font-size: .6em;
	}

}

Again, please note to paste this at the bottom of your stylesheet.

I’m afraid that I’m not 100% sure how to assist with your second question, but this should help with specifying that a menu item has sub-items in a mobile view.

Hope this helps.

• This reply was modified 8 years, 1 month ago by garethallison.

Hi @garethallison
thank you for your post…
I forgot to update my request with the solution I found…
1) in the css code I added

@media screen and (max-width: 940px){
    .main-navigation ul li:hover > ul {
    /*.main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul { maui  menu parent*/
        display: none;
    }
    .main-navigation  .menu .sub-toggle{ /*maui menu parent */
	position: absolute;
	top: 0px;
	right: 10px;
	cursor: pointer;
	width: 32px;
	height: 32px;
	text-align: center;
	outline: 0;
	background: transparent;
	font-size: 36px;
        color: #e6e6e6;
	}
}

2) and in the js code I added this function

jQuery(document).ready(function($){  /*maui parent menu*/
	$('.main-navigation .menu-item-has-children').append('<span class="sub-toggle"> <i class="fa fa-angle-right"></i> </span>');
	$('.main-navigation .sub-toggle').click(function() {
	   $(this).parent('.menu-item-has-children').children('ul.sub-menu').first().slideToggle('fast', 'linear');
	   $(this).children('.fa-angle-right').first().toggleClass('fa-angle-down');
	});

});

that is adding a dropdown arrow to the mobile menu if there are parent items and is showing parent menu items when clicked
Maurice

• This reply was modified 8 years, 1 month ago by maui2wp.

Hello, maui2wp.
Please provide me, where should i insert css code (step 1).
I tried it in the style.css:
– my mobile version looks perfectly!
– but my desktop version with the display width larger than 940 came out wrong .

And another question. Is it right to place js code (step 2) into the header-one.php
above this string ” <nav id=”site-navigation” class=”main-navigation <?php do_action( ‘accesspresslite_menu_alignment’ ); ?>”>”
Thanks in advance