Docs

[Sara H.]

hello xteam

regarding this thread: https://community.theme.co/forums/topic/wpml-language-switch-top-bar/

I am everything set, changed my _topbar.php / changed my functions.php and also my style.css all in the childtheme umbrella.
It was not easy, thank you for all your support at the forum without it I couldnt do it.

1. (Main Nav) My search still not working (I deactivated all the plugins and activated again)

all the next questions are regarding the Top Bar:

2. I have 2 sets of flags on the topbar, the left one should go out, but I dont how..
3. can i make bigger spacing between the socials icons and the flags on topbar? they seem a bit narrow.
4. is it possible to enlarge the flags without make them blurry?
5. When I resize the browser I can see on the small and xsmall a grey bar on the very top, I guess its from the TopBar content, Can you help me on deleting it?
6. Can I hide the menu on the topbar on S and XS sizes?
7. Can you please help me on center the flags and the social icons on smaller sizes?

Thank you!

[Sara H.]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Did you clear the cache after deactivating all the plugins? Please clear all cache after deactivating all the plugins and see if this resolves the searching issue.

For the rest of your queries, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

For 2.

.x-topbar .wpml-selector {
    display: none !important;
}

For 3.

.x-social-global a:nth-child(2) {
    margin: 0 10px 0 20px !important;
}

For 4.

.x-social-global a img {
    width: 25px !important;
}

For 5.

.x-topbar .p-info {
    background: transparent !important;
}

For 6 & 7

@media screen and (max-width: 650px){
.top-menu {
    display: none !important;
}
}

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

[Sara H.]

For 1. – No results..

For 2. – cool!
For 3. – only increased on the flags but not in the social icons
For 4. – cool!
For 5. – making it transparent will have that padding and still will increase the size of it, is there way to “deactivate” that feature?
For 6 & 7 – awesome!

thank you! awesome!

[Paul R]

1. Add this in Custom > Edit Global Javascript in the customizer.

jQuery(function($) {

$('.x-btn-navbar-search').on('touchstart click', function(e) {
    e.preventDefault();
    $('.x-searchform-overlay').toggleClass('in');
     $('.x-searchform-overlay').find('.search-query').focus();
  });

});

3. Change code to this.

.x-social-global a {
    margin: 0 10px 0 20px !important;
}

5. Change it to this

.x-topbar .p-info {
    display:none
}

Hope that helps.

[Sara H.]

thats great!

just to understand that javascript you gave me, what was the problem? it is a bug?
Its my first javascript coding added on this theme.

awesome!!!

[Paul R]

Hi,

Something is conflicting in your site which prevents the default search from working.

Though I am not sure which one as you have many plugins installed and some modification done with theme.

Adding the js code is a simple work around to have it working again.

Thanks

[Sara H.]

Thanks Paul and Nabeel for your help!

😀

[Joao]

Glad to hear we managed to help,

Have a great day,

Joao

[Author]

Posts