Hi,
I use the Ubermenu. On mobile there is my logo and then the row with the toggle on the right side: https://one-million-places.com/
I like to add a translation flag (with a shortcode) in the menu row left to the toggle. How can I do that?
Michael
Hey Michael,
There is no option to add additional stuff beside the mobile menu so you’d need to override the _nav-primary.php which houses the mobile navigation code. That file is located inside the \wp-content\themes\x\framework\legacy\cranium\headers\views\global folder. You need to replicate that folder structure in your child theme like \themes\x-child\framework\legacy\cranium\headers\views\global and copy the template in that folder in the child theme.
In the copied template file, you’ll need to add WPML’s language switcher code around the x-nav-wrap-mobile HTML structure. If you’ll be using a shortcode, you can use WordPress’ do_shortcode function. See https://css-tricks.com/snippets/wordpress/shortcode-in-a-template/
If you’re not a web developer, I’d recommend hiring one to custom code this for you.
I see you have Pro licenses though and the setup you need is easy to achieve using the Header Builder. I recommend converting your site to Pro so you can just add the WPML’s shortcode alongside UberMenu’s shortcode. Here’s how to add UberMenu shortcode in Pro Header just in case.
Hope that helps.
Hi,
thank you for your help.
I copied the file _nav-primary.php file to my X-Child. But whatever I put in there, it has no effect on the mobile view.
Is it because I have ubermenu activated (see screenshot)?
You can tell me in which row of _nav-primary.php I have to put that code that the flag is displayed next to the tggle menu?
<?php echo do_shortcode( "[prisna-wp-translate]" ); ?>
Hello @michaelxxx,
You can insert the shortcode like this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
echo do_shortcode( "[prisna-wp-translate]" );
ubermenu( $config_id, array( 'theme_location' => 'primary') );
else: ?>
<a href="#" id="x-btn-navbar" class="x-btn-navbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-nav-wrap-mobile" aria-expanded="false" aria-controls="x-nav-wrap-mobile" role="button">
<i class="x-icon-bars" data-x-icon-s=""></i>
<span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>
<nav class="x-nav-wrap desktop" role="navigation">
<?php x_output_primary_navigation(); ?>
</nav>
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggleable="x-nav-wrap-mobile" data-x-toggle-collapse="1" aria-hidden="true" aria-labelledby="x-btn-navbar">
<?php x_output_primary_navigation(); ?>
</div>
<?php endif; ?>
We would love to know if this has worked for you. Thank you.
With your code the Flag will be shown on Mobile and Desktop.
I can additionally add a [visibility type=“visible-phone”] to hide it on Desktop. But I don´t know if this is the best solution? So is it maybe the wrong place for the code?
And now the flag is shown in a seperate row above the toggle menu. How can I get it next to the menu?
Hey @michaelxxx,
If that is the case, please have the code updated and use this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
echo do_shortcode( '[visibility class="right" type="visible-phone"][prisna-wp-translate][/visibility]' );
ubermenu( $config_id, array( 'theme_location' => 'primary') );
else: ?>
<a href="#" id="x-btn-navbar" class="x-btn-navbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-nav-wrap-mobile" aria-expanded="false" aria-controls="x-nav-wrap-mobile" role="button">
<i class="x-icon-bars" data-x-icon-s=""></i>
<span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>
<nav class="x-nav-wrap desktop" role="navigation">
<?php x_output_primary_navigation(); ?>
</nav>
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggleable="x-nav-wrap-mobile" data-x-toggle-collapse="1" aria-hidden="true" aria-labelledby="x-btn-navbar">
<?php x_output_primary_navigation(); ?>
</div>
<?php endif; ?>
Please let us know if this works out for you.
You´re the best. Thank you 
One last question/problem: When I use the firefox debugger and switch to mobile view I can see the flag (see screenshot). But when I use my mobile device I can´t see the flag. I already deleted the cache on my phone.
Hello @michaelxxx,
I am not seeing on my browser too. Since you have installed a caching plugin LiteSpeed Cache, please clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
Please let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.