Docs

[peterjitg@yahoo.com]

Hello,

I’m using Ethos. Currently on mobile devices, my search icon in the navbar is hidden inside the mobile menu (sandwich menu). Meaning, users have to click on menu, scroll down and then see search. Is it possible to move the search icon outside the mobile menu and place it somewhere in the navbar perhaps next to the mobile menu icon?

Thanks

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thank you.

[peterjitg@yahoo.com]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

(function($) {
   $('.x-nav-wrap.mobile .x-menu-item-search').insertAfter('.x-btn-navbar');
})(jQuery);

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

a.x-btn-navbar-search {
    float: right !important;
    margin: 14px !important;
    color: #fff !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[peterjitg@yahoo.com]

We’re getting close. The only problem is desktop view. Take a look – https://www.dropbox.com/s/38jqwblhyp1a4p4/1.png?dl=0

Thank you.

[Christopher]

Hi there,

Please update JS code to :

(function($) {
   $('.x-nav-wrap.mobile .x-menu-item-search').insertAfter('.x-btn-navbar').addClass("mobile-search");
})(jQuery);

And add this CSS :

@media (min-width:979px){
li.menu-item.x-menu-item.x-menu-item-search.mobile-search {
    display: none;
}
}

Hope it helps.

[peterjitg@yahoo.com]

That fixed the desktop view but mobile looks wrong. Here’s a screenshot – https://www.dropbox.com/s/o36xg2mv9im62lt/6.png?dl=0

[Jade]

Please try to add this code:

@media (max-width: 978px) {
    li.menu-item.x-menu-item.x-menu-item-search.mobile-search {
        float: right;
        padding-top: 15px;
        padding-right: 10px;
    }    
}

Hope this helps.

[peterjitg@yahoo.com]

This reply has been marked as private.

[Jade]

Hi Peter,

I have added the code and it looks fine on my end. See screenshot attached.

Kindly check again on your end.

[peterjitg@yahoo.com]

Hi Jade,

Yes, it worked for me too, but like I said before, some things are off. 2 things to be exact:

1. On mobile, I only want to show the icon, without the “Search” word. And I want the icon in white color.
2. Here’s what it looks like on PC (desktop view) – https://www.dropbox.com/s/eg7ki4vz4rwrv1j/7.png?dl=0, the blue search icon next to the logo on the left should not be there at all.

-Peter

[Jade]

Hi Peter,

Thanks for updating.

#1 Please add this code:

li.menu-item.x-menu-item.x-menu-item-search.mobile-search .x-hidden-desktop {
    display: none !important;
}

li.menu-item.x-menu-item.x-menu-item-search.mobile-search i:before {
    color: #fff;
}

#2

@media (min-width: 1100px) {
    li.menu-item.x-menu-item.x-menu-item-search.mobile-search {
       display: none !important;
    }
}

Let us know how it goes.

[Nabeel A]

Hi Peter,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
a.x-btn-navbar-search .x-hidden-desktop {
    display: none !important;
}
a.x-btn-navbar-search .x-icon-search {
    color: #fff !important;
}
}

@media screen and (min-width: 980px){
.mobile-search .x-btn-navbar-search {
    display: none !important;
}
}

Let us know how this goes!

[peterjitg@yahoo.com]

Thanks guys. I went with Jade’s solution, it worked a little better. We’re almost there, I promise I’m just about done bugging ya 🙂 one last thing…I had to adjust the padding a bit to have the icon centered vertically, problem is, it appears differently on mobile vs desktop (when desktop window size is reduced). Take a look:

Mobile (nicely centered vertically): https://www.dropbox.com/s/iczh9we7sq496bx/9.PNG?dl=0
Desktop (a bit off): https://www.dropbox.com/s/3efx0xvw3ttp2bq/8.png?dl=0

I tried adjusting the padding but when I center desktop, mobile becomes off center.

PS: I did clear cache everywhere. Didn’t help.

[Rue Nel]

Hello There,

Please find and update the code. You can make use of this instead:

@media (max-width: 1040px)
li.menu-item.x-menu-item.x-menu-item-search.mobile-search {
    float: right;
    padding-top: 15px;
    padding-right: 24px;
}

You need to make change with the padding top to align the icon.

[Author]

Posts