Creating a Social Media Bar in the header that float properly on tablets and mobile devices

nonsectarianblues
21 Posts
nonsectarianblues posted this 18 January 2016

I'm attempting to create a social media icon bar on the right side of the header. I couldn't figure out how to do it except for inserting images into columns (The social media bar features a lot of non-standard social media sites, music-centic). When checking how the page displays on tablets and mobile phones, the social media icons float in a strange, broken way. I'm not sure what I'm doing. Any help would be appreciated including links to tutorials.

Thanks

I'm attempting to create a social media icon bar on the right side of the header. I couldn't figure out how to do it except for inserting images into columns (The social media bar features a lot of non-standard social media sites, music-centic). When checking how the page displays on tablets and mobile phones, the social media icons float in a strange, broken way. I'm not sure what I'm doing. Any help would be appreciated including links to tutorials. Thanks
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
DouzanStudio
138 Posts
DouzanStudio posted this 19 January 2016

Hi, If you're building your website from scratch, I suggest you to add a header section with social media icons from premade ones and edit it with your links. And to know how things going take a look on positioning of social icon bar and the container. The positioning different from desktop view to tablet or phone, so when we build our own sections we probably need to edit the positioning in each tablet or phone view.

For example, here I inserted container (the big one) with absolute position in section , then inserted the other container with layout and the float: to right , which I changed to: no value in tablet view, and inserted a social media control inside it(you can add icons from a file on your computer or clipart and search for icons), all this from insert tab.

positioning.png

Hi, If you're building your website from scratch, I suggest you to add a header section with social media icons from premade ones and edit it with your links. And to know how things going take a look on positioning of social icon bar and the container. The positioning different from desktop view to tablet or phone, so when we build our own sections we probably need to edit the positioning in each tablet or phone view. For example, here I inserted container (the big one) with absolute position in section , then inserted the other container with layout and the float: to right , which I changed to: no value in tablet view, and inserted a social media control inside it(you can add icons from a file on your computer or clipart and search for icons), all this from insert tab. !positioning.png!

Last edited 19 January 2016 by DouzanStudio

nonsectarianblues
21 Posts
nonsectarianblues posted this 19 January 2016

Thanks for the pointer. I'm sorry I forgot to post my site link: http://www.nonsectarianblues.com/daveparistest/ .

Thanks for the pointer. I'm sorry I forgot to post my site link: http://www.nonsectarianblues.com/daveparistest/ .
DouzanStudio
138 Posts
DouzanStudio posted this 19 January 2016

A lot of icons :) , insert this section (load from zip) and look at the positioning of elements

tablet-view.png

A lot of icons :) , insert this section (load from zip) and look at the positioning of elements !tablet-view.png!
nonsectarianblues
21 Posts
nonsectarianblues posted this 20 January 2016

Thanks. I'll give it a try and check it out.

Thanks. I'll give it a try and check it out.
DouzanStudio
138 Posts
DouzanStudio posted this 20 January 2016

You're welcome , themler released a new video on how to use a layout sections , It'll help you more , check it :

https://www.youtube.com/watch?v=MLKoZGOG8_M

I think the last layout section will work for you (Header Section With 2 Containers).

You're welcome , themler released a new video on how to use a layout sections , It'll help you more , check it : https://www.youtube.com/watch?v=MLKoZGOG8_M I think the last layout section will work for you (Header Section With 2 Containers).
griseldajena
1 Posts
griseldajena posted this 23 June 2021

Choose a perfect free music solution.

Choose a perfect free music solution.
hazijames00
17 Posts
hazijames00 posted this 22 February 2025

To create a responsive social media bar that floats properly on tablets and mobile devices, consider using flexbox or CSS positioning instead of relying on columns.

To create a responsive social media bar that floats properly on tablets and mobile devices, consider using flexbox or CSS positioning instead of relying on columns.
tombantom629
2 Posts
tombantom629 posted this 3 weeks ago

Discover the ultimate music experience with Spotify Premium APK, offering ad-free streaming and unlimited skips. Enjoy high-quality audio and access to your favorite songs anytime, anywhere. With the Spotify Premium APK, you can create playlists, explore new releases, and enjoy offline listening effortlessly. Transform your music experience with seamless features designed for true music lovers.

Discover the ultimate music experience with Spotify Premium APK, offering ad-free streaming and unlimited skips. Enjoy high-quality audio and access to your favorite songs anytime, anywhere. With the [Spotify Premium APK][1], you can create playlists, explore new releases, and enjoy offline listening effortlessly. Transform your music experience with seamless features designed for true music lovers. [1]: https://spotifymodapk.pk/
You must log in or register to leave comments