[NorAloeParticipant]

Hi Team,

So i finally made the biggest move yet and decided to get the WordPress Multilingual Plugin (wpml.org). And here is one question i have:

I tried to get the language Switcher Icon on the Menu Bar header and it looks really weird. I don’t want that. So i am looking to position in either a Topbar or Header bar which would resemble this: https://www.avril.ca/en/ (pay attention the the language option FR next to the Contact us Tab). I know X theme has a:
1-Top bar option
4-Header Option

So i am working with WPML to display it in either of them so it can resemble the https://www.avril.ca/en/ website, but would i need to create a child theme if i want the Language to show on all pages or posts? Is it possible to keep the header bar, top bar static so the options always shows? See files attached for a visual

Thanks team!

[NorAloeParticipant]

My site is completely gone with no and empty english menu!!!! Please Help ASAP!! I deactivated the plugin and nothing seem to comeback to normal!!

[NorAloeParticipant]

Ok false alarm on the most recent reply…i had to go back in customizer and reactivate the proper menu and choose to display a page as my main page. Not sure how WPML changed these settings.

So let’s focus on main questions from first post.

thanks

[ChristopherModerator]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy _topbar.php from framework/views/global and put it in the same path inside child theme, now put your code just after <?php x_social_global(); ?> line.

Please provide us with URL and login credentials in regards with English menu issue.

Hope it helps.

[NorAloeParticipant]

Hi,

When you say to “put your code just after <?php x_social_global(); ?> line.”….you are refering to the code that would allow me to have the Language Switcher icon En or Fr such as https://www.avril.ca/en/ ?.

[ZeshanMember]

Hi there,

Yes, the code you may want to insert would be this:

<div class="lang-switcher">
  <?php do_action('icl_language_selector'); ?>
</div>

This will output WPML language switcher in your topbar.

Thank you!

[NorAloeParticipant]

Hi,

1- I just realized that in ETHOS, which is my stack, When i check ON under “Customize – Header – Miscellaneous” My Topbar is locked inside the Menu bar and not at the top of the site such as in the website https://www.avril.ca/ like i want. Will i need to add the bar in header.php. ??

In other words, if you look at my current website http://www.noraloe.com, you will notice one of the Menu Option at the far end after Contact is the language option. I don’t want it there, i want it on top

2- Looking at the slider of my theme, if i add a bar at the top, will the slider will come down and the menu will be below the fold?? I want my page to stay proportioned on Desktop View so that it it will stay within the fold. Is that possible?

[ChristopherModerator]

Hi there,

#1 Copy wp-header.php from framework/views/ethos and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>
    <?php x_get_view( 'global', '_topbar' ); ?>
  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

#2 Please add .masthead in slider containers field.

Hope it helps.

[NorAloeParticipant]

Hi,

Thanks for info. I have done the steps outlined above and activated in “Customize” the Topbar option which now gives me my topbar (www.noraloe.com). But now that my topbar is up and running here are my questions:

1- After which line should i enter the language switcher code??
2- And what would be the exact code? I asked WPML support and they told me to enter:

<div class=”topbar”>
<?php do_action(‘wpml_add_language_selector’); ?>
</div>

Is this correct or should we go with you initial code recommendation of:
<div class=”lang-switcher”>
<?php do_action(‘icl_language_selector’); ?>
</div>

3- I added .masthead to the Rev slider layout but it still hides part of the navbar when the Topbar was added. I would like to have all my navbar tab visible on desktop view.

Thanks team!! This coding thing is finally starting to make sense to me! Thanks

[NorAloeParticipant]

Actually forgot to include my 4th question:

4- The icons/font color on the topbar is way too dark. How could i change the static and hover colors

thanks

[ChristopherModerator]

Hi there,

#1 Previous code just changed the position of topbar according to your request.

#2 Copy _topbar.php from framework/views/global and put it in the same path inside child theme, put language switcher code just after following code :

<?php echo x_get_option( 'x_topbar_content' ); ?>

Your new file should be like this :

<?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' ); ?>
<div class="lang-switcher">
<?php do_action('icl_language_selector'); ?>
</div>
</p>
      <?php endif; ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

#3 Please provide us with login credentials.

#4 Please add the following code in Customize -> Custom -> CSS :

.x-topbar .x-social-global i {
    color: white;
}

Hope it helps.

[NorAloeParticipant]

This reply has been marked as private.

[NorAloeParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the very detailed information.

1] We have modified your _topbar.php. The language switcher should be visible now.

3] Please edit your slider and please add these instead: .masthead, .x-topbar so that it will have both the topbar and the masthead as the offset containers.

4] Please update the given code. You can make use of this code:

.x-topbar .x-social-global a i {
    color: white;
}

.x-topbar .x-social-global a:hover i {
    color: red;
}

Hope this helps. Please let us know how it goes.

[NorAloeParticipant]

This reply has been marked as private.

[Author]

Posts