- This topic has 9 replies, 3 voices, and was last updated 8 years, 9 months ago by Andrew Misplon.
Tagged: Android outsideit.net Top Bar Menu ultra
- AuthorPosts
- January 3, 2016 at 7:51 pm #2885
Willem D’HaeseParticipantHello,
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
January 7, 2016 at 1:49 am #2891
Puro SupportKeymasterHi 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.
January 7, 2016 at 9:37 am #2892
Puro SupportKeymasterApologies, 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.
January 7, 2016 at 9:45 am #2893
Puro SupportKeymasterIn 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.
March 13, 2016 at 6:43 pm #3167
Willem D’HaeseParticipantHello,
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
March 14, 2016 at 1:21 pm #3172
Andrew MisplonKeymasterHi 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 🙂
March 14, 2016 at 1:22 pm #3173
Andrew MisplonKeymasterAhh! 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.
March 14, 2016 at 1:25 pm #3174
Willem D’HaeseParticipantAndrew,
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
March 14, 2016 at 1:44 pm #3177
Willem D’HaeseParticipantAndrew, 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?
March 14, 2016 at 3:24 pm #3179
Andrew MisplonKeymasterNo 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 editfunctions.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, clickSave 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; } }
- AuthorPosts
You must be logged in to reply to this topic.