[Resolved] Sticky Navigation > below mobile breakpoint > show additional menu items?

[Christian]

Dear Support Team,

I am using GP sticky navigation and it works awesome.
However, I wonder if it is possible to show additional menu items beyond the default ones (Logo, Hamburger, Search(magnifier icon)) in a screen state below the mobile breakpoint (768px)?
In my case I would like to show a WPML language switcher in addition to the defaults on mobile devices, so the sticky navigation below 768px would be:
Logo – Flag (Switcher) – Hamburger icon – Magnifier

Is there any CSS or function to achieve this goal?

Thank you for your consideration,

Best,
Chris

[David]

Hi there,

you can use the Hook Element and select the inside_mobile_menu_bar – then add the HTML/Shortcode for your language switcher.

[Christian]

Hi David,
thank you for your fast reply.
I followed your advice, however, the WPML shortcode is not rendered as flags (I enabled the “Execute Shortcodes” checkbox), although in the frontend on screensize <768px there is some space visible.
I am not quite sure if I need to add some php code to the child themes functions.php?
I found the following code snippet on WPML’s website:
do_action(‘wpml_add_language_selector’);

I am wondering if I need to add any function like I found here:
https://generatepress.com/forums/topic/how-to-add-shortcode-into-navigation/

<?php
add_action( ‘generate_inside_navigation’,’addnavshortcode’ );
function addnavshortcode() {
echo do_shortcode( ‘[fl_builder_insert_layout slug=”header1″]’ );
}
?>

Maybe you have an idea?

Best, Chris

[Christian]

Here is some more on the wpml switcher in menus:

https://wpml.org/forums/topic/language-switcher-shortcode-is-not-working-on-my-website/

and there is some php code.
I assume I would have to adjust the below provided code to show the correctly rendered shortcode inside the inside_mobile_menu_bar ?

// Filter wp_nav_menu() to add additional links and other output
// Show only other language in language switcher
// Use the new filter: https://wpml.org/wpml-hook/wpml_active_languages/ 
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
    // uncomment this to find your theme's menu location
    //echo "args:<pre>"; print_r($args); echo "</pre>";
  
    // get languages
    $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );
  
    // add $args->theme_location == 'primary-menu' in the conditional if we want to specify the menu location.
  
    if ( $languages && $args->theme_location == 'primary') {
  
        if(!empty($languages)){
  
            foreach($languages as $l){
                if(!$l['active']){
                    // flag with native name
                    $items = $items . '<li class="menu-item"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . $l['native_name'] . '</a></li>';
                    //only flag
                    //$items = $items . '<li class="menu-item menu-item-language"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a></li>';
                }
            }
        }
    }
  
    return $items;
}

[Tom]

I’m not 100% sure this will work, but try choosing the inside_navigation hook adding this in your Hook Element:

<?php
$languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

if ( ! empty( $languages ) ) {
    echo '<div class="mobile-bar-items">';
    foreach( $languages as $l ){
        if( ! $l['active'] ) {
            echo '<a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . $l['native_name'] . '</a>';
        }
    }
    echo '</div>';
}
?>

Then make sure Execute PHP is checked.

Let me know 🙂

[Christian]

Hello David, hello Tom,

wonderful! The PHP inside_navigation works perfectly – and I was even able to only show the flag without the text.
I am so happy with GeneratePress!
The only follow-up question is:
Is it possible to change the order of the mobile-menu items?
Right now the mobile menu shows as:
Logo – hamburger icon – flag – search (magnifier icon)
I would love to change the order to:
Logo – flag – search (magnifier icon) – hamburger icon

I tried

@media (max-width: 768px) {
.sticky-menu-logo .main-navigation.navigation-clone .menu-toggle {
float: right;
}
}

however, nothing changes. Probably there is a better solution…

Thank you for all your help and consideration,
Best,
Chris

[David]

First off in the code Tom provided here

Change this:

<div class="mobile-bar-items">

to:

<div class="mobile-bar-items language">

Then add this CSS:

@media (max-width: 768px) {
    .inside-navigation {
        display: flex;
    }
    .site-logo {
        order: -2;
        margin-right: auto;
    }
    .mobile-bar-items.language {
        order: -1;
    }    
}

[Christian]

Dear David, dear Tom,
thank you for your advice: everything works perfectly!
I am so happy with GeneratePress!
Best, Chris

[David]

Glad we could be of help

[Author]

Posts