Docs

[michaellanfield]

I have 2 lines of social media icons in the topbar and I would like to delete one line of them.

The reason I have 2 lines of social media icons is because I added a search bar and added the social media icons to the right of it, but the social media icons are also below that in the topbar. So I would like to remove the original social icons without using

.x-topbar .x-social-global {display: none;}
because it removes both lines of social media icons.

How to do this? Thank you.

[Rahul]

Hey there,

Can you please provide the link to your website so we can look into it and assist you further?

Thanks

[michaellanfield]

This reply has been marked as private.

[Joao]

Hi There

You had added beside the Searchbar code also code for the social Icons, which was unecessary. I have deleted the code for you.

This is the code I have deleted:

<div class="x-social-global">
<a class="facebook" target="_blank" title="Facebook" href="https://www.facebook.com/thevegansandwich">
<i class="x-icon-facebook-square" aria-hidden="true" data-x-icon=""></i>
</a>
<a class="twitter" target="_blank" title="Twitter" href="https://twitter.com/vegan_sandwich">
<i class="x-icon-twitter-square" aria-hidden="true" data-x-icon=""></i>
</a>
<a class="google-plus" target="_blank" title="Google+" href="https://plus.google.com/+Thevegansandwich2015">
<i class="x-icon-google-plus-square" aria-hidden="true" data-x-icon=""></i>
</a>
<a class="youtube" target="_blank" title="YouTube" href="https://www.youtube.com/user/tarve2010">
<i class="x-icon-youtube-square" aria-hidden="true" data-x-icon=""></i>
</a>

And if you also would like to make the word Search clickable you can use this code below instead the one you have at the topbar at the moment:

<a class="x-btn-navbar-search" href="#">
<span>
<i class="x-icon-search" aria-hidden="true" data-x-icon=""></i>
<span class="x-hidden-desktop"> Search</span>
</span>
Search</a>

Hope that helps,

Joao

[michaellanfield]

Thank you it worked. How do I align the search bar next to the social media icons to the left with small space in between the search and social media icons and place a menu to the right of the social media icons?

[Darshana]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-topbar .p-info {
    float: right;
    margin-left: 10px;
}

Hope that helps.

[michaellanfield]

Thank you that did the job, however I am not sure why the search item does not work and also how to make it a little bigger? Also how to add the search item to the left of the social icons and not the right?

[Nabeel A]

Hi again,

To change the position of your search icon you’ll need to replace the search code with this:

<a class="x-btn-navbar-search" href="#">
<span class="x-hidden-desktop"> Search</span>
Search
<span>
<i class="x-icon-search" aria-hidden="true" data-x-icon=""></i>
</span>
</a>

Please refer to this thread also https://community.theme.co/forums/topic/custom-search-link-not-working/#post-735312

Thanks!

[michaellanfield]

Doesn’t work. The position or the search functionality doesn’t work.

[Friech]

Hi There,

Update this custom css code:

.x-topbar .p-info {
    float: right;
    margin-left: 10px;
}

To this, this should align the search on the left of the social icons.

.x-topbar .p-info {
    float: right;
    margin-left: 10px;
    width: 140px;
    text-align: left;
}

Make the search text a little bigger.

.p-info .x-btn-navbar-search {
	    font-size: 1.3em;
}

Regarding the search; For this to work you need to enable the Navbar Search option on the Customizer under the Header tab.

Then just hide the search icon on the navbar with this css

.x-menu-item-search {display: none !important;}

Hope it helps, Cheers!

[michaellanfield]

I am not sure, doesn’t work.

[Friech]

Hi There,

The current topbar is different from before, maybe we should settle your custom menu first? And if you would not mind please deactivate the Wordfence in the meantime, as it has a caching feature.

Thanks.

[koruailimited]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-topbar .x-social-global {
    float: left !important;
}
p.p-info {
    float: right !important;
}

Hope it helps.

[koruailimited]

Thanks

the social media icons are now on the left , but all the text is on the right, included “follow us”.
Is it possible move “follow us” to the left, after the social media icons and keep “view cart” on the right???

[Author]

Posts