Canvas Support

Social media icons top and bottom not showing on mobile devices

1 reply · opened Apr 11, 2018

DdarrenApr 11, 2018

Hi there, I am using your Canvas theme which I think is fabulous, great work thanks. Hopefully you can help me out with this. On the example page

http://themes.semicolonweb.com/html/canvas/menu-6.html

The area with the icons <div id="top-social"> disappears on small devices, can I change it to keep this and the <div class="top-links"> displayed on the small devices as well?

By the way your fix for retaining the bottom social media icons displayed on small devices (mentioned on your forum) works but it seems to disable the back to top button, do you have a fix for this as well.

@media (max-width: 767px) {
#copyrights .col_half:last-child {
display: block;
margin-top: 30px;
float: none;
text-align: center !important;
}
#copyrights .col_half:last-child .fright { float: none !important; }
#copyrights .col_half:last-child .social-icon {
float: none !important;
display: inline-block !important;
}
}

I tried to open a ticket at http://support.semicolonweb.com but couldn't find the option to do this.

Many Thanks

SSemicolon WebSTAFFApr 17, 2018

Hello,

  1. To display the Social Media in the Top Bar on small devices, simply use the following CSS Code:
@media (max-width: 767px) {
	#top-bar .container { max-width: none; }

	#top-bar #top-social {
		display: block !important;
		border-top: 1px solid #EEE;
		text-align: center;
		margin: 0 -15px;
	}

	#top-bar #top-social li {
		float: none;
		display: inline-block;
		vertical-align: top;
		border: none;
	}
}

.device-xs #top-bar #top-social { margin: 0 -40px; }

  1. To display the Social Media in the Footer, you can simply use the CSS code you have used above.

  2. The Go To Top trigger is disabled by default on Mobile Devices. To enable it, simply add the data-mobile="true" Attribute to the #gotoTop Element. Example:

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard