Docs

[tmades]

Hi,

I’m trying to display 8 different ‘custom’ social media icons in the footer of my website. I’d like it to look something like this (see screenshot).

Here’s a link to my site: http://dirtyphonics.com

I’d also like to give them to change color when the cursor hovers over them.

Please halp!!

[Friech]

Hi There,

Thanks for writing in! We cant view your site, its under maintenance mode. Is the icons reflection necessary?

There is already a social icons on the footer, just enable the Footer Social on Customizer > Footer > Bottom Footer.

Then navigate to Customizer > Social put a URL on the social media field that you have and it will show it on the footer.

We might change the icons (to not squared) with CSS or on Custom template depend on what you need.

Please provide us login credentials in private reply so we can take a closer look on your current footer.

Cheers!

[tmades]

This reply has been marked as private.

[Joao]

Hi There,

I have added to the Style box of your image: max-height: 450px;

And also added a gap to help you centralize the logo.

Hope that helps

Joao

[tmades]

Sorry I don’t understand what you’ve done there.

Now it’s showing the default social icons although some of them are linked to different social platforms (ie. default Google+ icon directs to Instagram, LinkedIn directs to SoundCloud, etc).

How do I replace the default social icons with custom ones I’ve uploaded to the site’s ‘Media’ section?

[Friech]

Hi There,

Have you already resolve this issue? I can see that you already have the custom social icons on your footer.

Please clarify.

Thanks.

[tmades]

Yes I figured out how to display my custom icons but now I’m having a couple other issues:

1) How do I make the icons get smaller as the screen gets smaller (ie. on mobile). Right now viewing on mobile the icons are too big and spaced too close together. I’d like them to be relative with the rest of the page as the screen gets smaller. They also don’t seem to be centered on mobile, how can I achieve that as well?

2) Separate from the social icons I’d like to disable the mobile menu button and have it display as text (just like it is when viewing on desktop). I’ve been looking on the forums but can’t find the solution.

Essentially I’d like my page to look the same as it does on desktop no matter what screen size.

Thanks in advance!!

[Friech]

Hi There,

#1 The icons are relatively small and centered on my end. You can add the css below for spacing.

@media (max-width: 767px) {
	.x-colophon.bottom .x-social-global a {
	 width: 30px;
	}
}

#2 Add another section on top of that page, on that section add a RAW content element. Then lets hide that section on desktop by enabling the Hide Base on Screen Width option for large and extra large.

And then paste this on the RAW content element

<ul id="custom-menu" class="x-nav">
<li><a target="_blank" href="http://soundcloud.com/dirtyphonics"><span>MUSIC</span></a></li>
<li><a target="_blank" href="http://www.songkick.com/artists/862178-dirtyphonics"><span>TOUR</span></a></li>
<li><a target="_blank" href="https://www.youtube.com/user/Dirtyphonics"><span>VIDEO</span></a></li>
<li><a target="_blank" href="https://www.kt8merch.com/store/pages/Dirtyphonics"><span>MERCH</span></a></li>
</ul>

This may look raw but we will just style it.

Let us know how it goes.

Thanks

[tmades]

Awesome it’s there now but need to style (see screenshot). If we can get them lined up at the top the as it looks on desktop that would be great.

Also side topic, how can we get the social icons to sit lower in the footer on mobile?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
ul#custom-menu li {
    float: left;
    padding: 10px;
}
ul#custom-menu {
    display: table;
    margin: 0 auto;
}
.home header.masthead.masthead-stacked {
    display: none;
}
}

Please set first section’s padding to zero.

Hope that helps.

[Author]

Posts