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.

Apologies, the way in which we’ve adapted the mobile design isn’t child theme friendly. We’ll correct this in the next update. If at all possible, please, could you email us your FTP details. To complete this change we’ll need to make a change to a parent theme function and add a function to your child theme functions.php file. We’re happy to walk you through this but could also just make the two changes on your behalf. It’s up to you. Thanks for your ongoing support.

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.

Hello,

I only find wp-content/themes/ultra/style.css and wp-content/themes/ultra/functions.php
Is this location the child theme? Where can I find the parent style.css and parent functions.php?

Tx

Willem

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 🙂

Ahh! Apologies, of course, sorry, I see what this relates to.

Could I perhaps, make these changes on your behalf? I’ll need login details for your WordPress installation and FTP details just in case I make a small mistake. You could send these via Private Reply or, we could move this thread over to email. I’d be more than happy to do this for you.

Andrew,

I’m still trying to make the Ultra theme expand the top bar menu when browsing with mobile device such as Android. So if /wp-content/themes/ultra/functions.php is the parent where is the child functions.php then located? Please note my WordPress theming knowledge is low.. :p

Grtz

Andrew, sorry man. I can’t give you access to my server. It’s kind of secured with ssl certificates and other stuff. I could give you remote desktop access to my home pc for an hour with something like Chrome Remote Desktop?

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;
	}
}