[finger123Participant]

Hi. i have my social media icons on the menu bar. I would like them to be aligned on one line next to each other going left to right instead of going down like it is now. how can i do that?

also, i have the following code for instagram however i get an old instagram icon instead of the new icon for instagram. do you know the proper code for the new icon? <i class=”x-icon x-icon-instagram-square” data-x-icon=”” ></i>

Last, i need the code for Pinterest but cannot seem to find the right data-x-icon for pinterest.

thanks.

[JoaoModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[finger123Participant]

This reply has been marked as private.

[FriechModerator]

Hi There,

The code provided here: https://community.theme.co/forums/topic/social-media-icons-with-seperate-linking/#post-1411527 will fixed that.

You can use the codes provided here: https://community.theme.co/forums/topic/cant-see-social-icons-in-navigation-bar/#post-1339388

Cheers!

[finger123Participant]

Hi.

This works perfectly when in desktop mode. however is there another code to align it left as well under mobile view? Under mobile view, the icons still line up beneath each other instead of left to right.

[FriechModerator]

Hi There,

Update the given css code on that thread a little bit to this:

/*social icons on menu alignment*/
.x-nav .menu-item-2446 ul.sub-menu li.menu-item {
	float: left;
}
.x-nav .menu-item-2446 ul.sub-menu li.menu-item a {
	padding-right: 1em;
	padding-left: 1em;
}

Thanks.

[finger123Participant]

Hi

The updated code you provided works under mobile as well however under mobile, the links no longer work for the social media as the search link takes over. I like how the search goes onto the same line, but the search link function takes over and you cannot click on any other social media link under mobile view.

[RadModerator]

Hi there,

Please add this as well,

.x-navbar .mobile .x-nav>li.x-menu-item-search {
    float: right;
    display: inline-block;
    position: relative;
    top: -62px;
}

Hope this helps.

[finger123Participant]

HI.

Thanks for the code. that didnt seem to fix it though. Behavior is still the same. Under mobile view, the search takes over and no linking of each social icon is present.

[Rue NelModerator]

Hello There,

Thanks for updating in! To resolve your last issue which the search takes over and no linking of each social icon is present, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body .x-navbar .mobile .x-nav>li.x-menu-item-search {
    clear: both;
} 

We would loved to know if this has work for you. Thank you.

[finger123Participant]

sorry, but the code does not work. It actually jumbles up the search and the social media icons together now.

[FriechModerator]

Hi There,

Please add this Custom CSS instead.

@media (max-width: 899px) {
	li.x-menu-item-search {
		float: left;
	}
}

However, technically the search should not be lined up with the social icons hence it is not a social link but a parent menu item. It should left align like the other parent items or keep it center (default position).

Thanks.

[finger123Participant]

This code worked! Thanks so much!

[RahulModerator]

Glad it worked for you.

Let us know if we can help with anything else.

Thanks!

[Author]

Posts