Social Media Icons On Mobile

Is it possible to have the social media on the mobile version? Like at the bottom of the menu area?

Hi

I am not sure I understand your request so please provide more specific details about what you’re trying to do, also a screen pointing the desired result will help, so I can inspect this closer and get back to you with a more accurate answer.

Thanks!

There are social media icons at the top of my site (Facebook, twitter, Instagram, etc.) Is there no place on mobile to put these same icons? Like in the menu area? Basically I’m trying to make sure there are social media icons on mobile and I wasn’t sure if this was a setting you have to be able to add them.

View post on imgur.com

Hi

By default the theme does not display the top menu on mobile devices. However you can use this css in theme panel > custom code > custom css to display the top menu on mobile: http://screencast.com/t/CR5mfgq8EON

@media (max-width: 767px){
.td-header-top-menu {
display: block;
}
}

Thanks!

Ah ok. I was actually hoping to put them in the Menu area at the bottom where the side panel pops out. Here is an example.

View post on imgur.com

How could I do this?

Hi

You can achieve that by adding this line of code in menu-mobile.php file like here: http://screencast.com/t/bTeetwkylsu

locate_template('parts/header/top-widget.php', true);

Also you need this css in theme panel > custom code > custom css: http://screencast.com/t/y0OCloZqw

.td-mobile-content .td-header-sp-top-widget{
float: left!important;
background-color: red;
}

Thanks!

Hi Andrei,

Thank you for taking the time to look over this. The first set of code adds the social links to the bottom of the mobile menu, but removes the social links at the top of the website on desktop. I’m trying to keep the social links on desktop on the website, but just add them to the bottom of the menu section on mobile.

locate_template(‘parts/header/top-widget.php’, true); —– This removes social media links on desktop.

Basically. This is exactly what I’m trying to achieve, except not warped/stretched as I have had to expand the image over photoshop. Is this possible?

View post on imgur.com

Hi

Try to replace the previous code from menu-mobile.php with this one: http://pastebin.com/Sb60CWcu – http://screencast.com/t/SL5UQcgMayc Now the social icons should be displayed fine on both mobile and desktop devices.

Thanks!

Hi Andrei,

Thank you for taking care of this and it did work properly. Is there a way to get it to look exactly like it does in the image I provided, but just not warped? I was able to change the background color to white, however it seems the Facebook icon on the far left of the mobile menu is cut off.

I’m trying to enlarge the icons so they are flush across the bottom, with the same color background as the picture. If you can help me mimic the bottom image without the icons being warped I’d greatly appreciate it. This is how far I have gotten. http://i.imgur.com/sjj0oyq.png

View post on imgur.com

• This reply was modified 10 years by Dope Mag.
• This reply was modified 10 years by Dope Mag.

Hi

You can make the icons background-color white using this css: http://screencast.com/t/oOSao1VCu

@media (max-width: 767px){
.td-mobile-content .td-header-sp-top-widget{
width: 100%;
}
.td-header-sp-top-widget {
right: 0px;
}
.td-social-icon-wrap > a{
margin-right: 10px!important
}
}

Thanks!

Hi Andrei L.

How can I enlarge the social icons size in the mobile menu.
http://i.imgur.com/thBCaxp.jpg?1

Thx

Hi

Use this css in theme panel > custom code > custom css: http://screencast.com/t/ZGIixIi3a

#td-mobile-nav .td-social-icon-wrap .td-icon-font{
font-size: 22px;
}

Thanks!