DAWN THEME: Modify mobile version social media icons in header

[Smiley1311]

I modified the DAWN theme. I added social media icons to the header in the Dawn theme. It looks great on desktop but on mobile it looks bad, especially if you have many icons. Can someone write the code to modify the appropriate files (i.e. CSS) to either delete the icons from the mobile version header or display them in a different way that looks good?

Here is the header.liquid code and a screen shot of the desktop/mobile version.

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%}

{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}

header-drawer { justify-self: start; margin-left: -1.2rem; } @media screen and (min-width: 990px) { header-drawer { display: none; } } .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } } {% comment %} START ADDED CODE TO PUT SOCIAL ICONS ON HEADER {% endcomment %} ul.header-list-social.list-unstyled.list-social { margin-left: 8px; } @media screen and (max-width: 989px) { .header__icons .header-list-socail{ display:none !important; } @media screen and (max-width: 749px) { .header__icons ul.header-list-socail.list-unstyled.list-social { display: none; } } {% comment %} END OF ADDED CODE TO PUT SOCIAL ICONS ON HEADER {% endcomment %}

{%- style -%}
.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
{%- endstyle -%}

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> {%- if section.settings.menu != blank -%}

{% render 'icon-hamburger' %} {% render 'icon-close' %}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

  {% render 'icon-arrow' %} {{ link.title | escape }}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

    {% render 'icon-arrow' %} {{ childlink.title | escape }}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- if shop.customer_accounts_enabled -%} {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}

{%- if settings.social_twitter_link != blank -%}
• {%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }}
{%- endif -%} {%- if settings.social_facebook_link != blank -%}
• {%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }}
{%- endif -%} {%- if settings.social_pinterest_link != blank -%}
• {%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }}
{%- endif -%} {%- if settings.social_instagram_link != blank -%}
• {%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }}
{%- endif -%} {%- if settings.social_tiktok_link != blank -%}
• {%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }}
{%- endif -%} {%- if settings.social_tumblr_link != blank -%}
• {%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }}
{%- endif -%} {%- if settings.social_snapchat_link != blank -%}
• {%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }}
{%- endif -%} {%- if settings.social_youtube_link != blank -%}
• {%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }}
{%- endif -%} {%- if settings.social_vimeo_link != blank -%}
• {%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }}
{%- endif -%}

{%- endif -%}

{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- endif -%}

{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign image_size_2x = section.settings.logo_width | times: 2 | at_most: 5760 -%} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%}

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-caret' %}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-caret' %}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- else -%}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-caret' %}

  {%- for childlink in link.links -%}
  • {{ childlink.title | escape }} {%- if childlink.links != blank -%}
    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- endif -%} {%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}

{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{%- endif -%} {% comment %} START OF ADDED CODE TO ADD SOCIAL ICONS TO HEADER {% endcomment %}

{%- if settings.social_twitter_link != blank -%}
• {%- render 'icon-twitter' -%} {{ 'general.social.links.twitter' | t }}
{%- endif -%} {%- if settings.social_facebook_link != blank -%}
• {%- render 'icon-facebook' -%} {{ 'general.social.links.facebook' | t }}
{%- endif -%} {%- if settings.social_pinterest_link != blank -%}
• {%- render 'icon-pinterest' -%} {{ 'general.social.links.pinterest' | t }}
{%- endif -%} {%- if settings.social_instagram_link != blank -%}
• {%- render 'icon-instagram' -%} {{ 'general.social.links.instagram' | t }}
{%- endif -%} {%- if settings.social_tiktok_link != blank -%}
• {%- render 'icon-tiktok' -%} {{ 'general.social.links.tiktok' | t }}
{%- endif -%} {%- if settings.social_tumblr_link != blank -%}
• {%- render 'icon-tumblr' -%} {{ 'general.social.links.tumblr' | t }}
{%- endif -%} {%- if settings.social_snapchat_link != blank -%}
• {%- render 'icon-snapchat' -%} {{ 'general.social.links.snapchat' | t }}
{%- endif -%} {%- if settings.social_youtube_link != blank -%}
• {%- render 'icon-youtube' -%} {{ 'general.social.links.youtube' | t }}
{%- endif -%} {%- if settings.social_vimeo_link != blank -%}
• {%- render 'icon-vimeo' -%} {{ 'general.social.links.vimeo' | t }}
{%- endif -%}

{% comment %} END OF ADDED CODE TO ADD SOCIAL ICONS TO HEADER {% endcomment %}

{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);

this.createObserver();
}

disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}

reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘header-menu’);
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}

customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”,
“info”: “t:sections.header.settings.logo_position.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
}
]
}
{% endschema %}

[oscprofessional]

@Smiley1311 ,

Please share the store URL.

[LitCommerce]

Hi @Smiley1311 ,

It will be very difficult to show it better for mobile, I will show you how to hide it for mobile.

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
	.header-list-social.list-social	{
		display: none !important;
	}
}

[San21]

Hi, I have the same issue. When I add the base.css code from the accepted solution.

I still have the icons vertical with mobile, but the icons will not show anymore on desktop.

https://ez-kaia.myshopify.com

PW: gawldo

Thank you for your help

[LitCommerce]

Hi @San21 ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[oscprofessional]

@San21 ,

ul.header-list-social.list-unstyled.list-social {
    flex-wrap: nowrap;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid