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

Home Forums Support Sticky Navigation > below mobile breakpoint > show additional menu items?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #988668
    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

    #988695
    David
    Staff
    Customer Support

    Hi there,

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

    #988790
    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

    #988810
    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;
    }
    #989291
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #989422
    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

    Mobil menu order

    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

    #989580
    David
    Staff
    Customer Support

    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;
        }    
    }
    #993514
    Christian

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

    #993584
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.