[Support request] Placing language buttons on a different part of the navigation menu

[Marie Odile]

Hi,

I would like to place my languages links ‘EN’, ‘FR’ ‘ES’, ‘DE’ either to the left of the logo, or after the search button. Please check https://www.thefrenchcandle.com/en/about-us/
I would also like to have it’s own style, so there is no underline when hovering (so different css than the other elements in the menu) and having also his own font, color, size….

At the end I want to have it to look something like this : https://www.dropbox.com/s/kdpr5jo4e65m1t5/languages.png?dl=0 that when I hover the language it becomes black and bold.

Thanks in advance,
Jesus

[Tom]

You could use the generate_inside_navigation hook for that: https://docs.generatepress.com/article/generate_inside_navigation/

For example:

add_action( 'generate_inside_navigation','tu_add_language_icons_to_nav' );
function tu_add_language_icons_to_nav() {
?>
    <div class="language-icons hide-on-mobile">
        <a href="#">Language icon link</a>
        <a href="#">Another language icon link</a>
    </div>
<?php
}

Then you would use CSS to style them:

.language-icons {
    float: left;
}

.language-icons a {
    color: #777;
    font-size: 20px;
}

[Marie Odile]

Hi Tom,
This is not working.
I have the feeling the hook you gave me it’s in order to create my own language icons but what I want it’s to use the one that polylang provides by default.

In any case when I copy this hook into Generate press head hook the whole code displays in the page.

I was able to manipulate and change the size of these buttons by doing :

.lang-item a {
    font-size: 12px;
}

but I need to be able to position them in a different part of the navigation menu.
How can I position them either on the left of the logo or on the right of the search bar. The float left instruction didn’t work. Is there any easy way that this code:

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 1px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

that makes an effect that creates a line under each menu item when hover doesn’t apply to the language icons?
Thank you in advance,
Jesus

[Leo]

– The first part of the code should be added using Code Snippet:
https://docs.generatepress.com/article/adding-php/#code-snippets

– If you don’t want the code to apply to all menu item, then try adding menu-underline to the CSS Classes field of the items you do want underline, then change the code to this:

/* nav links effect */
.main-navigation .menu > .menu-item.menu-underline > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 1px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item.menu-underline > a::after,
.main-navigation .menu > .menu-item.menu-underline > a:hover::after {
    width: 50%;
}

[Marie Odile]

Hi Leo,

Sorry the delay with my answer but somehow working with Polylang + WordPress I broke the website.
So in order to avoid this to happen again I spent the last week optimizing my setup and making sure I have daily backups both on WordPress and on my server + I decided to use WPML which seems to be the most compatible multilanguage plugin. I also used your GeneratePRess Child basic theme and I am working on it now.

Regarding the language Icons, as I changed to WPML I haven’t been able to do what I wanted about placing all the languages icons to the right with different spaces between languages icons and different fonts, colors and css behaviour.

I was thinking about adding a widget aerea in the navigation panel and maybe then I can add in this widget directly the widget from WPML and customizing the elements from the WPML interface.

Would this work ?

If yes, I tried to use this in my functions.php child theme but is not working

/*ajouter WPML widget*/
add_action( 'generate_inside_navigation','generate_insert_into_navigation' );
function generate insert_into_navigation()
{ ?>
       <div id="header-widget-area" class="nwa-header-widget widget-area" role="complementary">
		</div>
<?php }

and I also add in the editor of mu child theme via wordpress :

function header_widgets_init() {
 
 register_sidebar( array(

 'name' => 'Ma nouvelle zone de widget',
 'id' => 'new-widget-area',
 'before_widget' => '<li class="nwa-widget">',
 'after_widget' => '</li>',
 'before_title' => '<h2 class="nwa-title">',
 'after_title' => '</h2>',
 ) );
}

add_action( 'widgets_init', 'header_widgets_init' );

and i believe this second code what it does is to add a new widget aera in the WordPress –> Appearance –> Widget page.

This second part seems to be working as I know have a new widget area in the Widget page where I can add WPML Language Switcher but the first code is breaking the website somehow. What I am doing wrong ?

If this approach is not an option, could you please help me on how to change the language switcher of WPML that appears now on the navigation menu of https://www.thefrenhcandle.com ?

Thank you in advance,
Jesus

[Marie Odile]

Hi,
I just learnt that there is a php fucntion in WPML that allows me to show the language switcher
do_action(‘wpml_add_language_selector’);
However I don’t know how to implement this combine with the hook generate_inside_navigation that will allow me to manage the CSS of the languages items separetely than the ones from the menu.

Thank you in advance,
Jesus

[Tom]

Have you tried this?:

add_action( 'generate_inside_navigation','tu_insert_into_navigation' );
function tu_insert_into_navigation()
{ ?>
    <div class="wpml-picker">
        <?php do_action( 'wpml_add_language_selector' ); ?>
    </div>
<?php }

[Marie Odile]

Hi Tom,
I am getting this error :
Fatal error: syntax error, unexpected ‘tu_insert_into_navigation’ (T_STRING), expecting ‘(‘ in /home/thefr242/public_html/wp-content/themes/generatepress_child/functions.php on line 40
so I renamed generate tu_insert_into_navigation() into generate_tu_insert_into_navigation()

I added this code into the functions.php of my child theme but there is no additional div in the navigation menu. Any idea?

Thank you,
Jesus

[Marie Odile]

Please ignore my previous message,
I was able to display the language switcher after modifying using the same name in the function and in the parameter. There was a small error in your code.
Let me see if I am able to position it correctly.
I will let you know!

[Tom]

Sorry about that! Glad you got it working 🙂

[Author]

Posts