[smoothjapanParticipant]

Hi there,

I’m trying to get the WPML Dropdown Menu to appear at the end of my main menu.

I have been able to make it appear LEFT of the menu by adding the code to _nav-primary.php but I want the code to be RIGHT of the menu. I’m assuming that I need to use the _topbar.php file for that location.

I added _topbar.php to x-child/framework/views/global with the following content:

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <div class="wpml-selector"><?php do_action('icl_language_selector'); ?></div>
      </div>
  </div>

<?php endif; ?>

However, nothing appears.

[smoothjapanParticipant]

This reply has been marked as private.

[smoothjapanParticipant]

I see you’re editing the page and that what I thought is the top-bar, isn’t the top bar.
The question then is how I can add the WPML widget after the menu.
I’m specifically looking for the dropdown menu one, not the checkbox one provided in the plugin.

Thanks for your assistance!

[FriechModerator]

Hi There,

Thanks for writing in! You need to enable the topbar, since you added the language switcher there. To do this navigate to Appearance > Customize. On Customizer under the Header tab, look for the Topbar option and enable it.

Hope it helps, Cheers!

[smoothjapanParticipant]

Thank you for the reply. I think we wrote this simultaneously. As I said, I would like to know the location in the theme that is behind (right of) the last menu item.

[smoothjapanParticipant]

In case the functions.php method is better, this is how far I got with that:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================
function add_wpml_menu_item($items, $args) {
  $items .= '<li><a href="#">Custom Item</a></li>';
  return $items;
}
add_filter('wp_nav_menu_items', 'add_wpml_menu_item', 10, 2);

I don’t know where or how I’d add the WPML plugin code though.

[JadeModerator]

Hi there,

Please try the code below like what is implemented here: http://premium.wpmudev.org/forums/topic/adding-language-switch-buttons-wpml-to-menu

function fixed_nav_menu_items($items) {
    if (function_exists('icl_get_languages')) {
        $languages = icl_get_languages('skip_missing=0');
        if (!empty($languages)) {
            foreach ($languages as $l) {
                if(!$l['active']) $items = '<li class="menu-item custom-switcher"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a></li>' .$items;
            }
        }
    }

    return $items;
}
add_filter('wp_nav_menu_items', 'fixed_nav_menu_items');

Hope this helps.

[smoothjapanParticipant]

Thanks! That’s fantastic!

Now if you could telle me how to use the ‘Language Name’ instead of the flag,
and place it on the right end instead of the left end of the menu, that’d be awesome!

[RadModerator]

Hi there,

In that case, please the above code to this

function fixed_nav_menu_items($items) {
    if (function_exists('icl_get_languages')) {
        $languages = icl_get_languages('skip_missing=0');
        if (!empty($languages)) {
            foreach ($languages as $l) {
                if(!$l['active']) $items .= '<li class="menu-item custom-switcher"><a href="' . $l['url'] . '">'. $l['native_name'].'</a></li>';
            }
        }
    }

    return $items;
}
add_filter('wp_nav_menu_items', 'fixed_nav_menu_items', 999999);

Cheers!

[smoothjapanParticipant]

You rock! Thank you!

[smoothjapanParticipant]

Last question, when I now switch to mobile the search bar is being cut off awkwardly.

I tried

@media (max-width:480px) {
  .x-topbar .widget_search { height: 50px; }    
}

and

@media (max-width:480px) {
  .x-topbar .widget_search { padding-bottom: 50px; }    
}

as well as margin but to no effect.

Is the selector wrong?

[Rue NelModerator]

Hello There,

Please use this code instead:

@media(max-width: 767px){
    .x-navbar .mobile .x-nav>li.x-menu-item-search>a {
        margin: 0 auto;
    }
}

Hope this helps.

[smoothjapanParticipant]

Fantastic. Thanks!

I adjusted it to this to include tablet sizes:

@media(max-width: 767px){
    .x-navbar .mobile .x-nav>li.x-menu-item-search>a {
        margin: 0 auto;
    }
}

[ThaiModerator]

If you need anything else, please let us know.

[Author]

Posts