Return to previous page

WPML LANGUAGE SWITCHER IN MOBILE FIXED HEADER

This topic has 10 replies, 3 voices, and was last updated 6 years, 7 months ago ago by Olga Barlow

BWA2

Participant

January 27, 2018 at 08:48

Hello,
This post is in reference to the already closed post:
https://www.8theme.com/topic/wpml-language-switcher-in-mobile-fixed-header/

What you described works well but is it possible to make this work with a child theme so that the changes don’t get lost every time I update the main theme?

I tried saving js/etheme.js and js/etheme.min.js in the child theme but it had no effect.
I have to save the files in the main theme for the changes to be applied.

Any ideas how to make it work with a child theme?

Thank you so much!

#183125 Copied

9 Answers

Rose Tyler

Support staff

January 29, 2018 at 11:05

Hello,

Please read how to include js via child theme in this topic https://www.8theme.com/topic/possible-to-add-secondary-menu-to-fixed-menu/#post-181824

Regards

#183200 Copied

BWA2

Participant

February 20, 2018 at 09:25

Hi Rose,
I have done
1. added wp_enqueue_script(‘child-theme’, get_stylesheet_directory_uri().’/etheme-child.js’,array(‘etheme’),false,true); to our child theme function.php

Then I created etheme-child.js and added the following code to it:

fixedHeader: function() {

            // **********************************************************************//
            // ! Fixed header
            // **********************************************************************//

            if ( $( 'body' ).hasClass( 'et-fixed-disable' ) ) return;
            if ( $( 'body' ).hasClass( 'et-vertical-fixed' ) && $(window).width() > 992 ) return;

            var header = $('.header-wrapper'),
                logo = header.find('.header-logo').html(),
                menu = header.find('.menu-wrapper').first(),
                menuClass = menu.attr('class'),
                menuRight = header.find('.menu-wrapper-right'),
                navbar = header.find('.navbar-header').html(),
                menuBtn = header.find('.navbar-toggle').html(),
                color = $('.page-wrapper').data('fixed-color'),
                startOffset = 240,
                menuHtml;
				var menu_switcher = header.find('.mobile-language-switcher').html();

            // Do it for non standard navbar
            if ( $( 'body' ).hasClass( 'shop-top-bar' ) ){
                navbar = this.NavbarHeader( 'fixed' );
            }

            if( menuRight.length > 0 ) {
                menuHtml = menu.html() + menuRight.html();
            } else {
                menuHtml = menu.html();
            }

            // Check values for "Toolset Layouts" plugin
            if ( logo == null ) logo = '';
            if ( menuHtml == null ) menuHtml = '';
            if ( navbar == null ) navbar = '';
            if ( menuBtn == null ) menuBtn = '<span class="sr-only">Menu</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>';

            var fixedHeaderHtml = '<div class="fixed-header header-color-' + color + '"><div class="container"><div class="header-logo">' + logo + '</div><div class="' + menuClass + '">' + menuHtml + '</div><div class="mobile-language-switcher">'+menu_switcher+'</div><div class="navbar-header">' + navbar + '</div><div class="navbar-toggle">' + menuBtn + '</div></div></div>';

            header.before(fixedHeaderHtml);

            if ($(window).width() < 768 ) { startOffset = 120; }

            var fixed = $('.fixed-header');
            if ( $('body').hasClass('et-header-fixed') ) {
                $(window).scroll(function(){
                    var currentScroll = $(this).scrollTop();

                    if( currentScroll > startOffset ) {
                        showFixed();
                    } else {
                        hideFixed();
                    }

                });
            }
            else {
                if ( $('body').hasClass('et-header-sticky') ) {
                    var previousScroll = 0,
                    animatedTimer = 0,
                    stickyHeight = fixed.outerHeight(),
                    stickyAfter = fixed.outerHeight() + 20;
                        $(window).scroll(function() {
                            var currentScroll = $(this).scrollTop();

                            // sticky header
                            if( ( currentScroll < previousScroll ) && ( currentScroll > startOffset ) ) {
                                fixed.addClass('sticky-header-enabled');
                            } else {
                                fixed.removeClass('sticky-header-enabled');
                            }

                        /*if (currentScroll < previousScroll){
                            // Scroll up
                        } else {
                            //Scroll down
                        }*/

                        previousScroll = currentScroll;
                    });
                }
            }

            var showFixed = function() {
                fixed.addClass('fixed-enabled');
            };

            var hideFixed = function() {
                fixed.removeClass('fixed-enabled');
            };
        },

and then I uploaded the etheme-child.js to the same folder as the child theme’s functions.php file.

But the WMPL flags still don’t show in the fixed mobile menu unfortunately. They only show in the initial main menu.

#185604 Copied

Olga Barlow

Support staff

February 20, 2018 at 11:52

Hello,

Can you provide me admin panel and FTP access to your site to check this?

Regards

#185641 Copied

BWA2

Participant

February 20, 2018 at 13:30

Hi Olga,
Thanks for your reply.
Here are the logins.
Thank you for looking into this.

#185666 Copied

Rose Tyler

Support staff

February 22, 2018 at 08:27

Hello,

We replaced all your code from theme-child.js (it was not able to work) and added working code

jQuery(document).ready(function($){
	var menu_switcher = $('.header-wrapper').find('.mobile-language-switcher').html();
	var fixed_menu = $('.fixed-header').find('.menu-wrapper');
	$(fixed_menu).after('<div class="mobile-language-switcher">'+menu_switcher+'</div>');
})

Now you should not worry about changing etheme.js and compressing into etheme.min.js in our theme. Menu switcher will be added without any worries just from your child-theme.

Regards

#185923 Copied

BWA2

Participant

February 22, 2018 at 08:31

Hi Rose – Thank you so much!
You guys have the best support of all theme makers I have ever worked with!
Thanks a lot.

#185926 Copied

Olga Barlow

Support staff

February 22, 2018 at 10:05

You are welcome!

Would you mind to rate our product:
http://prnt.sc/d256m6
https://themeforest.net/downloads