Add Sticky Social Banner to Website Page

[bstock98]

Hi everyone,

I am having issues adding a social banner to the webpages that were just brought over in a hubspot migration. The banner is just HTML and CSS. Before in earlier versions of the template the social banner worked. However, now with the fully migrated site, it no longer works. What is the issue I'm encountering? Is it in the coding of the pages or in the coding for the social banner itself?

Here is the code for the social banner that was working previously on the other template pages:

HTML:

<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The social media icon bar -->
<div class="icon-bar">
<a href="https://www.facebook.com/signumb/" target="_blank" class="bfacebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/BioSignum" target="_blank" class="btwitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/signum_biosciences/" target="_blank" class="binstagram"><i class="fa fa-instagram"></i></a>
</div>

CSS:

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
background-color: #fff;
}

.bfacebook {
background: #3B5998;
color: white;
}

.btwitter {
background: #55ACEE;
color: white;
}

.binstagram {
background: #dd2a7b;
color: white;
}

Here is the link to the Hubspot page that the social banner was working on:

http://blog.signumbiosciences.com/thescienceofstayinghealthy

Here is the link to the page that I need to social banner to work on:

http://signumbiosciences-4515283.hs-sites.com/

Am I not adding it in the right way? Do I have to add it sitewide somehow?

Please let me know if I need to add any more info, or if I should try something out to seeif it works.

Thank you so much for the help in the past, you guys are the best at getting back with answers!

[Stephanie-OG]

Hi there!

I took a look at the source for the sample page http://signumbiosciences-4515283.hs-sites.com/ and couldn't spot the code for the sticky social banner anywhere. 

I tested it on my site by creating a custom module with the code: 

Then adding it to my template and it seemed to work (in my case it was behind something so I had to make a minor tweak using z-index, but you might not need to).

You can add the custom module to certain templates (you should be able to drag it anywhere) or add it to all templates by putting it in the header or footer global group. 

If, when the code has been added, it's still not appearing, let us know and we can take another look. 

---

HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[bstock98]

My apologies, I took out the social banner from that page before, but now I put it back up. This page has multiple scrolable sections and even when I add it to the header it still doesn't show up. I played around with the z-index as well, but still no banner. Is it because of the layout of the page? Thank you again for the help.

[Stephanie-OG · Accepted solution]

Thank you for adding it again. I found two things on the page: 

• In your CSS file (Signum_Biosciences_August2018-style.css) there is a "display: none;"
• For the z-index, you'll want to remove the "px"

That seemed to work: 

I hope that helps!

---

HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[bstock98]

That worked perfectly. Thank you!