How to add the social icons inside the hamburger icon
SOLVECan you please advise how to add the social icons inside the hamburger icon when in mobile view (refer to pic1, pic2 & pic3). Just shrink your browser tab or view it in your mobile devices and you will be able to replicate this problem. Kindly assist on this, thanks.
1 Accepted solution
How to add the social icons inside the hamburger icon
SOLVEHow to add the social icons inside the hamburger icon
SOLVEHow to add the social icons inside the hamburger icon
SOLVEHow to add the social icons inside the hamburger icon
SOLVEHow to add the social icons inside the hamburger icon
SOLVEHi @Chris-M,
Thanks for the quick reply. The problem is I can't locate the place to add the social icons in the hamburger menu. From my understanding on your suggestion, you tried to add 2 social icons (socialmobile and socialdesktop) at the header and display them according to the screen size but from what I see they are still not inside the hamburger menu.
Currently what I did is to add the social icons module beside the header module and did some changes to the CSS so that they are aligned in desktop view but because they are still in different HTML div which is the cause of the icons not added inside the hamburger tab.
How to combine these two modules into one single module or where to locate the place to add the social icons inside the hamburger menu when in mobile view?
Here are the codes for my social icons module.
module.html
{% set networkData = [
{
"name": "facebook",
"iconName": "facebook-f",
"supportingText": "Facebook",
"networkColor": "#3b5998"
},
{
"name": "twitter",
"iconName": "twitter",
"supportingText": "Twitter",
"networkColor": "#55acee"
},
{
"name": "instagram",
"iconName": "instagram",
"supportingText": "Instagram",
"networkColor": "#c32aa3"
},
{
"name": "linkedin",
"iconName": "linkedin-in",
"supportingText": "LinkedIn",
"networkColor": "#0077b5"
},
{
"name": "youtube",
"iconName": "youtube",
"supportingText": "YouTube",
"networkColor": "#ff0000"
},
{
"name": "pinterest",
"iconName": "pinterest-p",
"supportingText": "Pinterest",
"networkColor": "#bd081c"
},
{
"name": "mail",
"iconName": "envelope",
"supportingText": "Email",
"networkColor": "#00a4bd"
},
{
"name": "website",
"iconName": "link",
"supportingText": "Website",
"networkColor": "#2096f3"
},
{
"name": "whatsapp",
"iconName": "whatsapp",
"supportingText": "Whatsapp",
"networkColor": "#25d366"
}
] %}
<div class="social-links social-links--{{ module.alignment }} social-links--{{ module.color_scheme }}">
{% for network in module.social %}
{% set networkInfo = networkData|selectattr('name', 'equalto', network.network)|first %}
{% set href = network.link.url.type == "EMAIL_ADDRESS" ? "mailto:" ~ network.link.url.href : network.link.url.href %}
<a href="{{ href }}" id="social-links__icon_{{ module.id }}" class="social-links__icon"
style="padding-left: {{ module.spacing }}px; padding-right: {{ module.spacing }}px;"
{% if network.link.open_in_new_tab %}target="_blank"{% endif %}
{% if network.link.no_follow %}rel="nofollow"{% endif %}
>
{% if module.display != "text_only" %}
{% if network.network == "icon" %}
<img src="{{ network.network_image.src }}" style="height: {{ module.scale }}px";>
{% else %}
<span class="social-links__icon-wrapper social-links__icon-wrapper--{{ module.icon_shape }} social-links__icon-wrapper--{{ module.color_scheme }}"
style="color: {{ networkInfo.networkColor if (module.icon_shape == "original") && (module.color_scheme == "color") }};
{% if ((module.icon_shape == "square") && (module.color_scheme == "color")) || ((module.icon_shape == "circle") && (module.color_scheme == "color")) %}background-color: {{ networkInfo.networkColor }};{% endif %}
height: {{ module.scale }}px; width: {{ module.scale }}px;">
{% icon name="{{ networkInfo.iconName }}", style="solid", no_wrapper=True %}
</span>
{% endif %}
{% endif %}
{% if (module.display == "icon_text") or (module.display == "text_only") %}
{{ network.supporting_text || networkInfo.supportingText }}
{% endif %}
</a>
{% endfor %}
</div>
{% if (module.display == "icon_text") or (module.display == "text_only") %}
<style>
#social-links__icon_{{ module.id }} {
font-family:{{ module.font_style.font }};
font-size: {{ module.font_style.size.value }}{{ module.font_style.size.units }};
color: {{ module.font_style.color }};
font-weight: {{ module.font_style.styles.bold ? 'bold' : 'normal' }};
font-style: {{ module.font_style.styles.italic ? 'italic' : 'normal' }};
text-decoration: {{ module.font_style.styles.underline ? 'underline' : 'none' }};"
}
</style>
{% endif %}
module.css
.social-links--center {
text-align: center;
}
.social-links--right {
text-align: right;
}
.social-links__icon {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.social-links__icon-wrapper {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
margin: 0 5px;
color: #fff;
}
.social-links__icon-wrapper:hover {
}
.social-links__icon-wrapper--circle {
border-radius: 50%;
}
.social-links__icon-wrapper--grey {
background-color: #666;
}
.social-links__icon-wrapper--black {
background-color: #000;
}
.social-links__icon-wrapper--original {
background-color: transparent;
}
.social-links__icon-wrapper--original.social-links__icon-wrapper--black {
color: #000;
}
.social-links__icon-wrapper--original.social-links__icon-wrapper--white {
color: #fff;
}
.social-links__icon-wrapper--original.social-links__icon-wrapper--grey {
color: #666;
}
.social-links__icon-wrapper--circle.social-links__icon-wrapper--white,
.social-links__icon-wrapper--square.social-links__icon-wrapper--white {
color: #000;
background-color: #fff;
}
.social-links__icon-wrapper svg {
fill: currentColor;
height: 60%;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sticky .span4:last-child {
margin-top: 20px !important;
}
@media screen and (min-width:992px) {
.custom-menu-primary .hs-menu-wrapper,
.custom-menu-primary .hs-menu-wrapper > ul ul {
display:block !important;
}
