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.
5 Comments
Order By: Standard | Newest
DouzanStudio
139 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
139 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
139 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).
You must log in or register to leave comments