Hi,
I am using an app called Widgetic (Social Buttons) to create an embed code for social buttons. Now I want to implement them in my top bar on my website (MDKSocks.nl) Problem is that whereever I put the code in the header-util.liquid it always show up above or below the searchbar with enlaring the bar as well. I just want it next to it like the picture below:
This is the embed code:
Where do I put the code that it show like that? (made in photoshop) or what am I doing wrong?
I also would love this text in that same bar:
Gratis verzending vanaf € 40,- Voor 15:00 besteld: verzending binnen 1 werkdag Beoordeeld met een 9,7+ Altijd meer dan 100 verschillende sokken op voorraad
Is that possible? I can simply ad this html in the header behind the search bar and it shows up, but I have no diea how to allign it better in the bar and how to makes sure it doesn’t show up on mobile because it completely disrupts my mobile top bar because of the small screen
1 Like
@MDKSocks
sorry i can’t see that one can you please show me
1 Like
What do you mean @KetanKumar ? What can’t you see? The images?
@MDKSocks
i can’t see social media icon
1 Like
@KetanKumar Yeah I removed it for a bit. I made it work putting it in a
so it is now alligned with the rest of the bar on desktop!
On mobile it show up in the side menu (way to big as well) instead of the bar next to the searchbar. I can add the same code again in the
and then it shows up in the bar on mobile but then I have the icons showing up on my desktop in front and behind of the search bar so that isn’t really an option. But I did manage to put the icons there without a problem
I hope you know how to remove them from the side menu on into the bar on mobile. I did manage to get it there but then it screwed up desktop view again, so that didn’t work well
1 Like
@MDKSocks
can you please confirm this look
1 Like
Hi @KetanKumar for me it looks like the screenshot I posted above.
But I want them next to the search bar also on mobile if possible.
I readded the code in another place and it showed up right on mobile but then it showed up double on desktop 
I made a photoshop on how it should look:
I know this is possible but with my limited CSS skills it is difficult @KetanKumar
Thanks for all the help so far!!
1 Like
@MDKSocks
yes its possible but i can’t see on mobile that look can please add code and let me know
There is no look on mobile??
Above his how it looks on mobile. I want the logos out of there and I want them like here:
This picture is photoshop. I hope it can be fixed so it will look for real like this! @KetanKumar
This is the widget code:
-
The li class = socials I did myself because I thought that could help me fix it
@MDKSocks
thanks for update yes its possible to custom code
1 Like
I am not an expert at all but it seems to be working like this @KetanKumar so it is all good!
