Move nested subpages under main menu in mobile view

Hey mariajoensen!

Thank you for using Enfold.

Add this to the functions.php file:

add_action( 'ava_after_main_container', 'ava_after_main_container_mod', 10, 2 );
function ava_after_main_container_mod() {
	echo '<div class="main_color container_wrap sidebar_right_mobile"><div class="container"><aside class="sidebar sidebar_right smartphones_sidebar_active alpha units" role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar"><div class="inner_sidebar">';
	avia_sidebar_menu(true);
	echo '</div></div></div></div>';
}

After that, add this to the Quick CSS field:

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
	.sidebar_right_mobile { display: none; }
}

Best regards,
Ismael

Hey!

I’m sorry but what do you mean by “first-menu-item”? Please provide a screenshot. I modified the code above and it seems to be working now on all pages:

add_action( 'ava_after_main_container', 'ava_after_main_container_mod', 10, 2 );
function ava_after_main_container_mod() {
	global $post;
	if(!empty($post->post_parent)) {
	echo '<div class="main_color container_wrap sidebar_right_mobile"><div class="container"><aside class="sidebar sidebar_right smartphones_sidebar_active alpha units" role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar"><div class="inner_sidebar">';	
	avia_sidebar_menu(true);
	echo '</div></div></div>';
	}
}

Don’t forget to add the custom css above in the Quick CSS field.

Cheers!
Ismael