Issue with Top Bar Menu on Android

This topic contains 9 replies, has 3 voices, and was last updated by  Andrew Misplon 2 years, 4 months ago.

  • Author
    Posts
  • #2885

    Willem D’Haese
    Participant

    Hello,

    Apparently I can login again with Google authentication. 🙂 First of all a happy New Year to you!

    I wanted to let you know I’m experiencing a small issues for my website https://outsideit.net:
    On Android when browsing to my website, the top bar menu items are not expanded when hovering over them. I’m not sure about other mobile operating systems. On PC everything works fine.

    Grtz

    Willem

    #2891

    Puro Support
    Keymaster

    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.

    #2892

    Puro Support
    Keymaster

    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.

    #2893

    Puro Support
    Keymaster

    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.

    #3167

    Willem D’Haese
    Participant

    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

    #3172

    Andrew Misplon
    Keymaster

    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 🙂

    #3173

    Andrew Misplon
    Keymaster

    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.

    #3174

    Willem D’Haese
    Participant

    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

    #3177

    Willem D’Haese
    Participant

    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?

    #3179

    Andrew Misplon
    Keymaster

    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;
    	}
    }
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Scroll to top