1

I am using smarthwave porto theme, in which I need to move the Default Welcome Message from Nav Menu (shown in screenshot 1) to main header panel (which is in blue color at top)(shown in screenshot 2) in MOBILE VIEW only.

enter image description here

And I want to move it to here,

enter image description here

Thank you in advance !!!

1 Answer 1

0

I have solved the issue by customization. In the themes header.php, I have added the custom div for appending. For example, I am using smartwave porto theme, so I have added in the following path

app\design\frontend\Companyname\Themename\Smartwave_Porto\templates\html\header.php

and added the following code

<div class="custom-wrapper"></div>

After doing that, I have made customization in theme's js. Code goes like this

require([
      'jquery'
    ], function ($) {
        $(window).on('resize', function(){
            var win = $(this); //this = window
            var isLoggedIn = $('.authorization-link > a').attr('href').indexOf('/login')<0;
            if (win.innerWidth() < 991) {
                if(isLoggedIn){
                    $(".header.panel .greet .logged-in").appendTo(".custom-wrapper");
                }else{
                    $(".header.panel .greet .not-logged-in").appendTo(".custom-wrapper");
                }
            }else{
                if(isLoggedIn){
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div.custom-wrapper").appendTo("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div.panel.header.show-icon-tablet > ul > li.greet.welcome");
                }else{
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div.custom-wrapper").appendTo("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div.panel.header.show-icon-tablet > ul > li.greet.welcome");
                }
            } 
            if(win.innerWidth() >= 991) {
                if(isLoggedIn){
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.custom-wrapper").appendTo("#html-body div.page-wrapper header div.main-panel-top div div div div.header-right div ul li.greet.welcome");
                }else{
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.custom-wrapper").appendTo("#html-body div.page-wrapper header div.main-panel-top div div div div.header-right div ul li.greet.welcome");
                }
            }else{
                if(isLoggedIn){
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div > ul > li.greet.welcome > div").insertBefore(".main-panel-inner .header-right .header.panel");
                }else{
                    $("#html-body > div.page-wrapper > header > nav > div > div > div > div > div.header-right > div > ul > li.greet.welcome > div").insertBefore(".main-panel-inner .header-right .header.panel");
                }
            }
        });
        $(window).resize();
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.