Issue with Top Bar Menu on Android

Hi Willem

Apologies for the delay. Drop downs are disabled below 1024 by design but we can customise this for you. We’ll revert with a solution ASAP.

In case you’d like to jump in right away:

1. Remove the following from your parent style.css file:

@media (max-width: 1024px) {
  .resp .top-bar-navigation ul ul {
    display: none !important;
  }
}

2. In the parent functions.php file you’ll find the following function: ultra_responsive_menu_css. That entire function needs to change to:

if ( ! function_exists( 'ultra_responsive_menu_css' ) ):
/**
 * Output the responsive menu collpase point.
 */
function ultra_responsive_menu_css() {
	if( ! siteorigin_setting( 'navigation_responsive_menu' ) || ! siteorigin_setting( 'layout_responsive' ) ) return;
	$mobile_resolution = apply_filters( 'ultra_responsive_menu_resolution', 1024 );
	?>
	<style type="text/css" id="ultra-menu-css"> 
		@media screen and (max-width: <?php echo intval( $mobile_resolution ) ?>px) { 
			.responsive-menu .main-navigation ul { display: none } 
			.responsive-menu .menu-toggle { display: block }
			.responsive-menu .menu-search { display: none }
			.site-header .site-branding-container { max-width: 90% }
			.main-navigation { max-width: 10% }
			#top-bar { display: block }
			#top-bar .container { overflow: hidden }
 			.resp .top-bar-navigation ul ul { display: none !important }			
		}		
	</style>
	<?php
}
add_action( 'wp_head', 'ultra_responsive_menu_css' );
endif;

3. Finally, in the functions.php file of your child theme, add:

if ( ! function_exists( 'ultra_responsive_menu_css' ) ):
/**
 * Output the responsive menu collpase point.
 */
function ultra_responsive_menu_css() {
	if( ! siteorigin_setting( 'navigation_responsive_menu' ) || ! siteorigin_setting( 'layout_responsive' ) ) return;
	$mobile_resolution = apply_filters( 'ultra_responsive_menu_resolution', 1024 );
	?>
	<style type="text/css" id="ultra-menu-css"> 
		@media screen and (max-width: <?php echo intval( $mobile_resolution ) ?>px) { 
			.responsive-menu .main-navigation ul { display: none } 
			.responsive-menu .menu-toggle { display: block }
			.responsive-menu .menu-search { display: none }
			.site-header .site-branding-container { max-width: 90% }
			.main-navigation { max-width: 10% }		
		}		
	</style>
	<?php
}
add_action( 'wp_head', 'ultra_responsive_menu_css' );
endif;

We’re happy to make these changes on your behalf.

Hi Willem

Good to hear from you. Thanks for the wait, I was, unfortunately, offline most of the weekend.

The parent style.css file is located at /wp-content/themes/ultra/style.css and the parent functions.php file is located at /wp-content/themes/ultra/functions.php.

Could you perhaps let me know what you’re looking to change so I can assist a bit further?

Thanks 🙂

No problem, I understand. Looking over our previous mails you did mention you wanted to do this yourself so apologies for bringing up an already asked question.

I have another method of carrying this change out which I’m going to cover below, it’s a bit more forgiving if we make a mistake:

1. Go to Appearance > Editor and edit functions.php. Locate the following function:

/**
 * Output the responsive menu collpase point.
 */
function ultra_responsive_menu_css() {
	if( ! siteorigin_setting( 'navigation_responsive_menu' ) || ! siteorigin_setting( 'layout_responsive' ) ) return;
	$mobile_resolution = apply_filters( 'ultra_responsive_menu_resolution', 1024 );
	?>
	<style type="text/css" id="ultra-menu-css"> 
		@media screen and (max-width: <?php echo intval( $mobile_resolution ) ?>px) { 
			.responsive-menu .main-navigation ul { display: none } 
			.responsive-menu .menu-toggle { display: block }
			.responsive-menu .menu-search { display: none }
			.site-header .site-branding-container { max-width: 90% }
			.main-navigation { max-width: 10% }
			#top-bar { display: block }
			#top-bar .container { overflow: hidden }
		}		
	</style>
	<?php
}
add_action( 'wp_head', 'ultra_responsive_menu_css' );

Replace this function with the following updated function:

if ( ! function_exists( 'ultra_responsive_menu_css' ) ) :
/**
 * Output the responsive menu collpase point.
 */
function ultra_responsive_menu_css() {
	if( ! siteorigin_setting( 'navigation_responsive_menu' ) || ! siteorigin_setting( 'layout_responsive' ) ) return;
	$mobile_resolution = apply_filters( 'ultra_responsive_menu_resolution', 1024 );
	?>
	<style type="text/css" id="ultra-menu-css"> 
		@media screen and (max-width: <?php echo intval( $mobile_resolution ) ?>px) { 
			.responsive-menu .main-navigation ul { display: none } 
			.responsive-menu .menu-toggle { display: block }
			.responsive-menu .menu-search { display: none }
			.site-header .site-branding-container { max-width: 90% }
			.main-navigation { max-width: 10% }
			#top-bar { display: block }
			#top-bar .container { overflow: hidden }
		}		
	</style>
	<?php
}
add_action( 'wp_head', 'ultra_responsive_menu_css' );
endif;

2. Go to Appearance > Editor > style.css and locate:

@media (max-width: 1024px) {
  .resp .top-bar-navigation ul ul {
    display: none !important;
  }
}

Replace this rule with the following rule:

@media (max-width: 1024px) {
  .resp .top-bar-navigation ul ul {
    visibility: hidden;
  }
}

3. Install the following plugin: https://wordpress.org/plugins/code-snippets/. Activate. This plugin negates the use of a child theme.

4. Go to Snippets > Add New and create a new snippet called: Ultra Responsive Menu CSS. Add the following code to the snippet:

if ( ! function_exists( 'ultra_responsive_menu_css' ) ) :
/**
 * Output the responsive menu collpase point.
 */
function ultra_responsive_menu_css() {
	if ( ! siteorigin_setting( 'navigation_responsive_menu' ) || ! siteorigin_setting( 'layout_responsive' ) ) return;
	$mobile_resolution = apply_filters( 'ultra_responsive_menu_resolution', 1024 );
	?>
	<style type="text/css" id="ultra-menu-css"> 
		@media screen and (max-width: <?php echo intval( $mobile_resolution ) ?>px) { 
			.responsive-menu .main-navigation ul { display: none } 
			.responsive-menu .menu-toggle { display: block }
			.responsive-menu .menu-search { display: none }
			.site-header .site-branding-container { max-width: 90% }
			.main-navigation { max-width: 10% }		
		}		
	</style>
	<?php
}
add_action( 'wp_head', 'ultra_responsive_menu_css' );
endif;

For Scope at the bottom, select: Only run on site front-end, then, click Save changes and activate. You must click this button and not just the Save changes button.

5. Finally, go to Appearance > Custom CSS and insert:

/* Top Bar */
@media (max-width: 1024px) {
	.resp .top-bar-navigation ul .menu-item-has-children a:after,.resp
	    .top-bar-navigation ul .page_item_has_children a:after {
		display: initial;
	}
	
	.resp .top-bar-navigation ul ul {
		visibility: visible;
	}
}