Solved

Place social media icons to the left of search bar on header | Reformer Theme

pjcasgui
Tourist
15 1 0

I'm trying to implement social media icons on my header, for this site: www.artclubapparel.com

 

Ideally I would like to place them below the search bar and shopping cart as highlighted in green on the screenshot below:

Screenshot 2024-05-13 at 10.45.17 PM.png

 

The header is a bit tricky though, because when you hover the mouse when on the Home page, the hero images are on the background.  Currently when this happens, logo, icons turn to white, then revert back to black when on the rest of site.

 

The theme I'm using has an Announcement Bar feature, but it doesn't have an additional section for social media icons.  It's only function is rotating text.

Any help would be greatly appreciated.

 

Thank you!

Accepted Solutions (6)
pjcasgui
Tourist
15 1 0

This is an accepted solution.

Oh, that's odd. Sorry. Apparently (.rtf) files aren't supported.  I'll just paste them here.

theme.liquid

<!doctype html>

{%- capture dir -%}

{%- case request.locale.iso_code -%}

  {%- when 'ae' or 'ar' or 'arc' or 'bcc' or 'bqi' or 'ckb' or 'dv' or 'fa' or 'glk' or 'ha' or 'he' or 'kwh' or 'ks' or 'ku' or 'mzn' or 'nqo' or 'pnb' or 'ps' or 'sd' or 'ug' or 'ur' or 'yi' -%}

    rtl

  {%- else -%}

    ltr

{%- endcase -%}

{%- endcapture -%}

<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{{ dir }}">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">

<meta name="theme-color" content="{{ settings.color_body_bg }}">

<link rel="canonical" href="{{ canonical_url }}">

<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{% render 'head-preload' %}

 

{% if settings.favicon != blank -%}

<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">

{%- endif %}

 

<title>

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}

</title>

 

{% if page_description %}

<meta name="description" content="{{ page_description | escape }}">

{% endif %}

 

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

{%- endunless -%}

 

{% render 'social-meta-tags' %}

 

{{ 'app.css' | asset_url | stylesheet_tag }}

 

{% render 'head-variables' %}

 

<script>

window.theme = window.theme || {};

theme = {

settings: {

money_with_currency_format: {{- shop.money_format | json -}},

cart_drawer: {{- settings.cart_drawer -}},

product_id: {% if product %}{{ product.id }}{% else %}false{% endif %},

},

routes: {

root_url: '{{ routes.root_url }}',

cart_url: '{{ routes.cart_url }}',

cart_add_url: '{{ routes.cart_add_url }}',

search_url: '{{ routes.search_url }}',

cart_change_url: '{{ routes.cart_change_url }}',

cart_update_url: '{{ routes.cart_update_url }}',

predictive_search_url: '{{ routes.predictive_search_url }}',

},

variantStrings: {

        addToCart: `{{ 'products.product.add_to_cart' | t }}`,

        soldOut: `{{ 'products.product.sold_out' | t }}`,

        unavailable: `{{ 'products.product.unavailable' | t }}`,

        preOrder: `{{ 'products.product.pre_order' | t }}`,

      },

strings: {

requiresTerms: `{{ 'sections.cart.terms_confirm' | t }}`,

shippingEstimatorNoResults: `{{ 'sections.cart.shipping_estimator.no_results' | t }}`,

shippingEstimatorOneResult: `{{ 'sections.cart.shipping_estimator.one_result' | t }}`,

shippingEstimatorMultipleResults: `{{ 'sections.cart.shipping_estimator.multiple_results' | t }}`,

shippingEstimatorError: `{{ 'sections.cart.shipping_estimator.error' | t }}`

}

};

</script>

{{ content_for_header }} <!-- Header hook for plugins -->

 

<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>

</head>

<body class="animations-{{ settings.animations }} button-uppercase-{{ settings.button_uppercase }} navigation-uppercase-{{ settings.navigation_uppercase }} product-title-uppercase-{{ settings.product_title_uppercase }}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}">

<a class="screen-reader-shortcut" href="#main-content">{{ 'accessibility.skip_to_text' | t }}</a>

<div id="wrapper">

{% sections 'header-group' %}

<div role="main" id="main-content">

{{ content_for_layout }}

</div>

{% sections 'footer-group' %}

{% render 'cart-drawer' %}

{% render 'product-drawer' %}

{% render 'search-drawer' %}

<div class="click-capture"></div>

</div>

 

{{ 'vendor.min.js' | asset_url | script_tag }}

{% if settings.animations %}

{{ 'animations.min.js' | asset_url | script_tag }}

<script>

gsap.defaults({

ease: Power4.easeOut

});

gsap.config({

    nullTargetWarn: false

  });

gsap.registerPlugin(ScrollTrigger);

</script>

{% endif %}

{% if settings.enable_quick_view or settings.enable_quick_add %}

{{ 'product.js' | asset_url | script_tag }}

{% endif %}

{{ 'slideshow.js' | asset_url | script_tag }}

{{ 'app.js' | asset_url | script_tag }}

<script type="module" src="{{ 'scroll-shadow.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>

{%- if request.design_mode -%}

{{ 'theme-editor.js' | asset_url | script_tag }}

{%- endif -%}

{%- if settings.cart_recommendations -%}

<script src="{{ 'product-recommendations.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

{% render 'back-to-top' %}

  <style>

h1.collection-banner--title {

    display: none !important;

}

</style>

  </body>

</html>

______

footer.liquid

{% liquid

assign full_width = section.settings.full_width

assign copyright_text = section.settings.copyright_text

assign show_language_switcher = section.settings.show_language_switcher

assign show_currency_switcher = section.settings.show_currency_switcher

assign show_payment_icons = section.settings.show_payment_icons

%}

 

<link rel="stylesheet" href="{{ 'footer.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'footer.css' | asset_url | stylesheet_tag }}</noscript>

 

<footer class="footer" id="footer">

<div class="row {% if full_width %}full-width-row{% endif %}">

{%- for block in section.blocks -%}

{% if block.type == 'text' %}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--text">

{%- if block.settings.title != blank -%}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{%- endif -%}

{%- if block.settings.image != blank -%}

{% assign image = block.settings.image %}

{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}

{%- render 'responsive-image', image: image, sizes: master_width, retina: 1, priority: 'low' -%}

{%- endif -%}

{%- if block.settings.text != blank -%}

<div class="rte text-size--{{ block.settings.text_size }}">

{{ block.settings.text }}

</div>

{%- endif -%}

{%- if block.settings.button_text != blank -%}

<a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a>

{%- endif -%}

{%- if block.settings.show_social_links -%}

{%- render 'social-links' -%}

{%- endif -%}

</div>

</div>

{% endif %}

{%- if block.type == 'menu' -%}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

endcase

-%}

<div class="{{ column_class | escape }} columns widget--menu-column" {{ block.shopify_attributes }}>

<div class="widget widget--menu">

<button class="thb-widget-title collapsible" tabindex="0">{{ block.settings.title }} <span></span></button>

{%- if block.settings.menu != blank -%}

<ul class="thb-widget-menu">

  {% for link in block.settings.menu.links %}

  {% assign has_sub_menu = false %}

  {% if link.links.size > 0 %}

    {% assign has_sub_menu = true %}

{% endif %}

  <li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if link.active %} active{% endif %}">

    <a href="{{ link.url }}" title="{{ link.title | escape }}"{%- if link.active %} aria-current="page"{% endif -%}>{{ link.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}

    {% if has_sub_menu %}

    <ul class="sub-menu" tabindex="-1">

        {% for l in link.links %}

{% assign has_sub_menu = false %}

  {% if l.links.size > 0 %}

    {% assign has_sub_menu = true %}

{% endif %}

        <li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if l.active %} active{% endif %}" role="none">

          <a href="{{ l.url }}" title="{{ l.title | escape }}" role="menuitem">{{ l.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}

{% if has_sub_menu %}

<ul class="sub-menu" role="menu">

{% for sub_link in l.links %}

{% assign has_sub_menu = false %}

{% if sub_link.links.size > 0 %}

{% assign has_sub_menu = true %}

{% endif %}

<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if sub_link.active %} active{% endif %}" role="none">

<a href="{{ sub_link.url }}" title="{{ sub_link.title | escape }}" role="menuitem">{{ sub_link.title }}</a>

</li>

{% endfor %}

</ul>

{% endif %}

        </li>

{% endfor %}

    </ul>

    {% endif %}

  </li>

  {% endfor %}

</ul>

{%- endif -%}

</div>

</div>

{%- endif -%}

{%- if block.type == 'signup' -%}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--signup">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

{% render 'email-signup-form' %}

</div>

</div>

{%- endif -%}

{%- if block.type == 'social' -%}

{%- liquid

assign column_class = 'small-6 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--social">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{% render 'social-links' %}

</div>

</div>

{%- endif -%}

{%- if block.type == 'custom_liquid' -%}

{%- liquid

assign column_class = 'small-6 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--custom">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{{ block.settings.custom_liquid }}

</div>

</div>

{%- endif -%}

{%- endfor -%}

</div>

<div class="sub-footer">

<div class="row {% if full_width %}full-width-row{% endif %}">

<div class="small-12 medium-8 columns">

{% render 'localization', id: 'FooterLocalization', show_language_switcher: show_language_switcher, show_currency_switcher: show_currency_switcher %}

</div>

<div class="small-12 medium-4 columns">

{%- if show_payment_icons -%}

<div class="footer-payment-icons">

        {%- unless shop.enabled_payment_types == empty -%}

          {%- for type in shop.enabled_payment_types -%}

            <figure>{{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}</figure>

          {%- endfor -%}

        {%- endunless -%}

        </div>

{%- endif -%}

</div>

<div class="small-12 columns">

<p>&copy; {{ 'now' | date: "%Y" }} {{ shop.name }}, {{ copyright_text }} {{ powered_by_link }}</p>

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}

          <div class="footer--follow-on-shop">

            {{ shop | login_button: action: 'follow' }}

          </div>

        {%- endif -%}

</div>

</div>

</div>

</footer>

 

{% schema %}

  {

"name": "Footer",

"class": "section-footer",

"settings": [

{

"type": "checkbox",

"id": "full_width",

"default": false,

"label": "Make section full width"

},

      {

        "type": "text",

        "id": "copyright_text",

        "label": "Additional copyright text",

        "default": "All rights reserved."

      },

{

        "type": "checkbox",

        "id": "show_language_switcher",

        "label": "Enable language switcher",

        "default": true,

"info": "To add a language, go to your [language settings](/admin/settings/languages)."

      },

{

        "type": "checkbox",

        "id": "show_currency_switcher",

        "label": "Enable currency switcher",

        "default": true,

"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."

      },

{

        "type": "checkbox",

        "id": "show_payment_icons",

        "label": "Show payment icons",

        "default": true,

"info": "By default your theme shows the icons that are associated with the payment gateway you have enabled in the [payment settings](/admin/settings/payments)."

      },

{

      "type": "header",

      "content": "Follow on Shop",

      "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"

    },

{

      "type": "checkbox",

      "id": "enable_follow_on_shop",

      "default": true,

      "label": "Enable Follow on Shop"

    }

],

"blocks": [

{

      "type": "@app"

    },

{

        "type": "text",

        "name": "Text",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

            "type": "image_picker",

            "id": "image",

            "label": "Image",

"info": "240 x 100 px .png recommended."

          },

{

            "type": "richtext",

            "id": "text",

            "label": "Text",

            "default": "<p>Add company info here.</p>"

          },

{

"type": "select",

"id": "text_size",

"label": "Text size",

"options": [

{

"value": "small",

"label": "Small"

},

{

"value": "medium",

"label": "Medium"

},

{

"value": "large",

"label": "Large"

}

],

"default": "medium"

},

{

            "id": "button_text",

            "type": "text",

            "label": "Button label",

            "default": "Explore",

"info": "Leave the label blank to hide the button."

          },

          {

            "id": "button_link",

            "type": "url",

            "label": "Button link"

          },

{

        "type": "checkbox",

        "id": "show_social_links",

        "label": "Show social links",

        "default": true

      }

]

      },

      {

        "type": "menu",

        "name": "Menu",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

"type": "link_list",

"id": "menu",

"default": "footer",

"label": "Menu",

"info": "Select navigation to display"

}

]

      },

{

        "type": "social",

        "name": "Social links",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          }

]

      },

{

        "type": "signup",

        "name": "Email signup",

"limit": 1,

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

            "type": "richtext",

            "id": "text",

            "label": "Text",

            "default": "<p>Add a text to attract more customers to <strong>sign up!</strong></p>"

          }

]

      },

{

        "type": "custom_liquid",

        "name": "Custom liquid",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

"type": "liquid",

"id": "custom_liquid",

"label": "Custom liquid",

"info": "Add app snippets or other Liquid code to create advanced customizations."

}

]

      }

    ]

  }

{% endschema %}



View solution in original post

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

Hi, @pjcasgui 

In  snippets/header-secondary-area.liquid line you can add this code  after this line

	<a class="thb-secondary-area-item thb-secondary-cart" href="{{ routes.cart_url }}" id="cart-drawer-toggle"><div class="thb-secondary-item-icon">{%- render 'svg-icons' with 'cart' %} <span class="thb-item-count">{%- if cart.item_count > 99 -%}{%- render 'svg-icons' with 'thb-asterisk' -%}{%- else -%}{{ cart.item_count }}{%- endif -%}</span></div></a>
	
{% render 'social-links' %} which will render your footer social link. Now need to adjust the CSS Or you can put their any custom div and show the social icon 
Hope it helps you to find the location and solve
thank you
Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

@pjcasgui 

You can use this css it will optimize the icon like the image

.thb-header-right {
    position: relative;
}

.thb-header-right .social-links {
    position: absolute;
    top: 42px;
    right: 0;
    display: flex;
    gap: 15px;
}

.thb-header-right .social-links li {
    margin-bottom: 0;
    line-height: 0;
    padding: 5px;
}

.thb-header-right .social-links li a {
    height: 0;
    display: contents;
}

.thb-header-right .social-links span {
    display: none;
}

 ,  15-5-2024-perform-theme-header-cion.jpeg

 

I hope you find this useful. If it meets your needs, please consider liking and marking it as the accepted solution.

Kind regards,

Arif from ShopiDevs

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

Hi, Extremly sorry, not checked that your theme used app.css you can insert at the end of the file or at the end of theme.liquid file

 

 <style>
 .thb-header-right {
    position: relative;
}

.thb-header-right .social-links {
    position: absolute;
    top: 42px;
    right: 0;
    display: flex;
    gap: 15px;
}

.thb-header-right .social-links li {
    margin-bottom: 0;
    line-height: 0;
    padding: 5px;
}

.thb-header-right .social-links li a {
    height: 0;
    display: contents;
}

.thb-header-right .social-links span {
    display: none;
}
</style>

 

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

hi, @pjcasgui 
Use this css

<style> 
.header.transparent--true:not(:hover):not(.is-sticky) .social-links li a svg path{
     color: #da0707 !important;
    stroke: red;
    fill: red;
}

</style>

 

You can change the color which you need, I have set red. Now when hover it show correct one and new CSS will change CSS for transparent header.
Hope this issue will work for you.

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

 

Hi,

Use this css it will hide in mobile.
@media all and (max-width: 479px) {
.header.social-links{
display:none;
}

}

 

If the issus is solved like and click as solution the post. 🙂

 

Thank you 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Replies 22 (22)

Arif_Shopidevs
Shopify Partner
135 18 13

Hi @pjcasgui 

Which theme are you using? In your header file, you can search for the CSS class thb-secondary-area thb-header-right, which is for the top area. Then, you can add the social links that you inserted in the footer. This needs to be done through your theme coding. Since this is not a default Shopify theme, we are unable to provide the correct code for it.

Thank you.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Hi, I'm using Reformation Theme.  

Arif_Shopidevs
Shopify Partner
135 18 13

Hi, @pjcasgui 
If possible you can share the header.liquide and footer.liquid file then we can check and told you what to put. We do not have this theme. It may be Premium theme. 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Hi @Arif_Shopidevs , yes it is a premium theme.

 

I've attached both files.

Arif_Shopidevs
Shopify Partner
135 18 13

Can. you check again? no file is attached

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

This is an accepted solution.

Oh, that's odd. Sorry. Apparently (.rtf) files aren't supported.  I'll just paste them here.

theme.liquid

<!doctype html>

{%- capture dir -%}

{%- case request.locale.iso_code -%}

  {%- when 'ae' or 'ar' or 'arc' or 'bcc' or 'bqi' or 'ckb' or 'dv' or 'fa' or 'glk' or 'ha' or 'he' or 'kwh' or 'ks' or 'ku' or 'mzn' or 'nqo' or 'pnb' or 'ps' or 'sd' or 'ug' or 'ur' or 'yi' -%}

    rtl

  {%- else -%}

    ltr

{%- endcase -%}

{%- endcapture -%}

<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{{ dir }}">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">

<meta name="theme-color" content="{{ settings.color_body_bg }}">

<link rel="canonical" href="{{ canonical_url }}">

<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{% render 'head-preload' %}

 

{% if settings.favicon != blank -%}

<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">

{%- endif %}

 

<title>

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}

</title>

 

{% if page_description %}

<meta name="description" content="{{ page_description | escape }}">

{% endif %}

 

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

{%- endunless -%}

 

{% render 'social-meta-tags' %}

 

{{ 'app.css' | asset_url | stylesheet_tag }}

 

{% render 'head-variables' %}

 

<script>

window.theme = window.theme || {};

theme = {

settings: {

money_with_currency_format: {{- shop.money_format | json -}},

cart_drawer: {{- settings.cart_drawer -}},

product_id: {% if product %}{{ product.id }}{% else %}false{% endif %},

},

routes: {

root_url: '{{ routes.root_url }}',

cart_url: '{{ routes.cart_url }}',

cart_add_url: '{{ routes.cart_add_url }}',

search_url: '{{ routes.search_url }}',

cart_change_url: '{{ routes.cart_change_url }}',

cart_update_url: '{{ routes.cart_update_url }}',

predictive_search_url: '{{ routes.predictive_search_url }}',

},

variantStrings: {

        addToCart: `{{ 'products.product.add_to_cart' | t }}`,

        soldOut: `{{ 'products.product.sold_out' | t }}`,

        unavailable: `{{ 'products.product.unavailable' | t }}`,

        preOrder: `{{ 'products.product.pre_order' | t }}`,

      },

strings: {

requiresTerms: `{{ 'sections.cart.terms_confirm' | t }}`,

shippingEstimatorNoResults: `{{ 'sections.cart.shipping_estimator.no_results' | t }}`,

shippingEstimatorOneResult: `{{ 'sections.cart.shipping_estimator.one_result' | t }}`,

shippingEstimatorMultipleResults: `{{ 'sections.cart.shipping_estimator.multiple_results' | t }}`,

shippingEstimatorError: `{{ 'sections.cart.shipping_estimator.error' | t }}`

}

};

</script>

{{ content_for_header }} <!-- Header hook for plugins -->

 

<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>

</head>

<body class="animations-{{ settings.animations }} button-uppercase-{{ settings.button_uppercase }} navigation-uppercase-{{ settings.navigation_uppercase }} product-title-uppercase-{{ settings.product_title_uppercase }}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}">

<a class="screen-reader-shortcut" href="#main-content">{{ 'accessibility.skip_to_text' | t }}</a>

<div id="wrapper">

{% sections 'header-group' %}

<div role="main" id="main-content">

{{ content_for_layout }}

</div>

{% sections 'footer-group' %}

{% render 'cart-drawer' %}

{% render 'product-drawer' %}

{% render 'search-drawer' %}

<div class="click-capture"></div>

</div>

 

{{ 'vendor.min.js' | asset_url | script_tag }}

{% if settings.animations %}

{{ 'animations.min.js' | asset_url | script_tag }}

<script>

gsap.defaults({

ease: Power4.easeOut

});

gsap.config({

    nullTargetWarn: false

  });

gsap.registerPlugin(ScrollTrigger);

</script>

{% endif %}

{% if settings.enable_quick_view or settings.enable_quick_add %}

{{ 'product.js' | asset_url | script_tag }}

{% endif %}

{{ 'slideshow.js' | asset_url | script_tag }}

{{ 'app.js' | asset_url | script_tag }}

<script type="module" src="{{ 'scroll-shadow.js' | asset_url }}" defer="defer"></script>

<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>

{%- if request.design_mode -%}

{{ 'theme-editor.js' | asset_url | script_tag }}

{%- endif -%}

{%- if settings.cart_recommendations -%}

<script src="{{ 'product-recommendations.js' | asset_url }}" defer="defer"></script>

{%- endif -%}

{% render 'back-to-top' %}

  <style>

h1.collection-banner--title {

    display: none !important;

}

</style>

  </body>

</html>

______

footer.liquid

{% liquid

assign full_width = section.settings.full_width

assign copyright_text = section.settings.copyright_text

assign show_language_switcher = section.settings.show_language_switcher

assign show_currency_switcher = section.settings.show_currency_switcher

assign show_payment_icons = section.settings.show_payment_icons

%}

 

<link rel="stylesheet" href="{{ 'footer.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'footer.css' | asset_url | stylesheet_tag }}</noscript>

 

<footer class="footer" id="footer">

<div class="row {% if full_width %}full-width-row{% endif %}">

{%- for block in section.blocks -%}

{% if block.type == 'text' %}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--text">

{%- if block.settings.title != blank -%}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{%- endif -%}

{%- if block.settings.image != blank -%}

{% assign image = block.settings.image %}

{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}

{%- render 'responsive-image', image: image, sizes: master_width, retina: 1, priority: 'low' -%}

{%- endif -%}

{%- if block.settings.text != blank -%}

<div class="rte text-size--{{ block.settings.text_size }}">

{{ block.settings.text }}

</div>

{%- endif -%}

{%- if block.settings.button_text != blank -%}

<a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a>

{%- endif -%}

{%- if block.settings.show_social_links -%}

{%- render 'social-links' -%}

{%- endif -%}

</div>

</div>

{% endif %}

{%- if block.type == 'menu' -%}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

endcase

-%}

<div class="{{ column_class | escape }} columns widget--menu-column" {{ block.shopify_attributes }}>

<div class="widget widget--menu">

<button class="thb-widget-title collapsible" tabindex="0">{{ block.settings.title }} <span></span></button>

{%- if block.settings.menu != blank -%}

<ul class="thb-widget-menu">

  {% for link in block.settings.menu.links %}

  {% assign has_sub_menu = false %}

  {% if link.links.size > 0 %}

    {% assign has_sub_menu = true %}

{% endif %}

  <li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if link.active %} active{% endif %}">

    <a href="{{ link.url }}" title="{{ link.title | escape }}"{%- if link.active %} aria-current="page"{% endif -%}>{{ link.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}

    {% if has_sub_menu %}

    <ul class="sub-menu" tabindex="-1">

        {% for l in link.links %}

{% assign has_sub_menu = false %}

  {% if l.links.size > 0 %}

    {% assign has_sub_menu = true %}

{% endif %}

        <li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if l.active %} active{% endif %}" role="none">

          <a href="{{ l.url }}" title="{{ l.title | escape }}" role="menuitem">{{ l.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}

{% if has_sub_menu %}

<ul class="sub-menu" role="menu">

{% for sub_link in l.links %}

{% assign has_sub_menu = false %}

{% if sub_link.links.size > 0 %}

{% assign has_sub_menu = true %}

{% endif %}

<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if sub_link.active %} active{% endif %}" role="none">

<a href="{{ sub_link.url }}" title="{{ sub_link.title | escape }}" role="menuitem">{{ sub_link.title }}</a>

</li>

{% endfor %}

</ul>

{% endif %}

        </li>

{% endfor %}

    </ul>

    {% endif %}

  </li>

  {% endfor %}

</ul>

{%- endif -%}

</div>

</div>

{%- endif -%}

{%- if block.type == 'signup' -%}

{%- liquid

assign column_class = 'small-12 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--signup">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

{% render 'email-signup-form' %}

</div>

</div>

{%- endif -%}

{%- if block.type == 'social' -%}

{%- liquid

assign column_class = 'small-6 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--social">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{% render 'social-links' %}

</div>

</div>

{%- endif -%}

{%- if block.type == 'custom_liquid' -%}

{%- liquid

assign column_class = 'small-6 medium-4 large-2'

case block.settings.column_size

when 'medium'

assign column_class = 'small-12 medium-3'

when 'large'

assign column_class = 'small-12 medium-6'

 

endcase

-%}

<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>

<div class="widget widget--custom">

{% if block.settings.title != blank %}

<div class="thb-widget-title">{{ block.settings.title }}</div>

{% endif %}

{{ block.settings.custom_liquid }}

</div>

</div>

{%- endif -%}

{%- endfor -%}

</div>

<div class="sub-footer">

<div class="row {% if full_width %}full-width-row{% endif %}">

<div class="small-12 medium-8 columns">

{% render 'localization', id: 'FooterLocalization', show_language_switcher: show_language_switcher, show_currency_switcher: show_currency_switcher %}

</div>

<div class="small-12 medium-4 columns">

{%- if show_payment_icons -%}

<div class="footer-payment-icons">

        {%- unless shop.enabled_payment_types == empty -%}

          {%- for type in shop.enabled_payment_types -%}

            <figure>{{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}</figure>

          {%- endfor -%}

        {%- endunless -%}

        </div>

{%- endif -%}

</div>

<div class="small-12 columns">

<p>&copy; {{ 'now' | date: "%Y" }} {{ shop.name }}, {{ copyright_text }} {{ powered_by_link }}</p>

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}

          <div class="footer--follow-on-shop">

            {{ shop | login_button: action: 'follow' }}

          </div>

        {%- endif -%}

</div>

</div>

</div>

</footer>

 

{% schema %}

  {

"name": "Footer",

"class": "section-footer",

"settings": [

{

"type": "checkbox",

"id": "full_width",

"default": false,

"label": "Make section full width"

},

      {

        "type": "text",

        "id": "copyright_text",

        "label": "Additional copyright text",

        "default": "All rights reserved."

      },

{

        "type": "checkbox",

        "id": "show_language_switcher",

        "label": "Enable language switcher",

        "default": true,

"info": "To add a language, go to your [language settings](/admin/settings/languages)."

      },

{

        "type": "checkbox",

        "id": "show_currency_switcher",

        "label": "Enable currency switcher",

        "default": true,

"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."

      },

{

        "type": "checkbox",

        "id": "show_payment_icons",

        "label": "Show payment icons",

        "default": true,

"info": "By default your theme shows the icons that are associated with the payment gateway you have enabled in the [payment settings](/admin/settings/payments)."

      },

{

      "type": "header",

      "content": "Follow on Shop",

      "info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"

    },

{

      "type": "checkbox",

      "id": "enable_follow_on_shop",

      "default": true,

      "label": "Enable Follow on Shop"

    }

],

"blocks": [

{

      "type": "@app"

    },

{

        "type": "text",

        "name": "Text",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

            "type": "image_picker",

            "id": "image",

            "label": "Image",

"info": "240 x 100 px .png recommended."

          },

{

            "type": "richtext",

            "id": "text",

            "label": "Text",

            "default": "<p>Add company info here.</p>"

          },

{

"type": "select",

"id": "text_size",

"label": "Text size",

"options": [

{

"value": "small",

"label": "Small"

},

{

"value": "medium",

"label": "Medium"

},

{

"value": "large",

"label": "Large"

}

],

"default": "medium"

},

{

            "id": "button_text",

            "type": "text",

            "label": "Button label",

            "default": "Explore",

"info": "Leave the label blank to hide the button."

          },

          {

            "id": "button_link",

            "type": "url",

            "label": "Button link"

          },

{

        "type": "checkbox",

        "id": "show_social_links",

        "label": "Show social links",

        "default": true

      }

]

      },

      {

        "type": "menu",

        "name": "Menu",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

"type": "link_list",

"id": "menu",

"default": "footer",

"label": "Menu",

"info": "Select navigation to display"

}

]

      },

{

        "type": "social",

        "name": "Social links",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          }

]

      },

{

        "type": "signup",

        "name": "Email signup",

"limit": 1,

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

            "type": "richtext",

            "id": "text",

            "label": "Text",

            "default": "<p>Add a text to attract more customers to <strong>sign up!</strong></p>"

          }

]

      },

{

        "type": "custom_liquid",

        "name": "Custom liquid",

"settings": [

{

"type": "select",

"id": "column_size",

"label": "Column size",

"options": [

{ "value": "small", "label": "Small" },

{ "value": "medium", "label": "Medium" },

{ "value": "large", "label": "Large" }

],

"default": "small"

},

{

            "id": "title",

            "type": "text",

            "label": "Title"

          },

{

"type": "liquid",

"id": "custom_liquid",

"label": "Custom liquid",

"info": "Add app snippets or other Liquid code to create advanced customizations."

}

]

      }

    ]

  }

{% endschema %}



pjcasgui
Tourist
15 1 0

Oh, that's odd. Apparently (.rtf) files aren't supported.  I tried pasting the code, but it didn't go through either. 

I've added them to a Google Docs file, please let me know if you're able to view:

https://docs.google.com/document/d/e/2PACX-1vSr8lUq5mvMYbMtROudLS5iluIcnTJss8O_vtS7tLNhpZyyJiXwrFdYh...

Arif_Shopidevs
Shopify Partner
135 18 13

Thank you for the file but unfortunatly the code is not exits their. Are you able to find from your theme file. Or you can send me the theme file from top personal message. I can find that for you if you want.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Oh no.  Okay, I uploaded the files to a WeTransfer link: https://we.tl/t-QFeh1p4MZV  

Let me know if you can access them fine.  

 

Thank you

Arif_Shopidevs
Shopify Partner
135 18 13

Thank you but here is no header code.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Sorry for the confusion.   I figured out how to download the theme file and uploaded via WeTransfer: ///////

 

Fingers crossed.

Arif_Shopidevs
Shopify Partner
135 18 13

My download is complete, please remove the link, so that , this premium theme can't download by all. Which. may financially lose the theme author. 
I will update you soon.
thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

Hi, @pjcasgui 

In  snippets/header-secondary-area.liquid line you can add this code  after this line

	<a class="thb-secondary-area-item thb-secondary-cart" href="{{ routes.cart_url }}" id="cart-drawer-toggle"><div class="thb-secondary-item-icon">{%- render 'svg-icons' with 'cart' %} <span class="thb-item-count">{%- if cart.item_count > 99 -%}{%- render 'svg-icons' with 'thb-asterisk' -%}{%- else -%}{{ cart.item_count }}{%- endif -%}</span></div></a>
	
{% render 'social-links' %} which will render your footer social link. Now need to adjust the CSS Or you can put their any custom div and show the social icon 
Hope it helps you to find the location and solve
thank you
Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

@pjcasgui 

You can use this css it will optimize the icon like the image

.thb-header-right {
    position: relative;
}

.thb-header-right .social-links {
    position: absolute;
    top: 42px;
    right: 0;
    display: flex;
    gap: 15px;
}

.thb-header-right .social-links li {
    margin-bottom: 0;
    line-height: 0;
    padding: 5px;
}

.thb-header-right .social-links li a {
    height: 0;
    display: contents;
}

.thb-header-right .social-links span {
    display: none;
}

 ,  15-5-2024-perform-theme-header-cion.jpeg

 

I hope you find this useful. If it meets your needs, please consider liking and marking it as the accepted solution.

Kind regards,

Arif from ShopiDevs

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Thank you Arif, where do I place this css?

 

Right now it's appearing like this, when the background is white:

Screenshot 2024-05-15 at 3.52.26 PM.png

And it stays black, when the background scrolls up:

Screenshot 2024-05-15 at 3.53.59 PM.png

 

Will the provided css take into account changing the color to white when the white bg is not present?

Thank you.

Arif_Shopidevs
Shopify Partner
135 18 13

Put this css in base.css file in your theme .

 1. navigate your theme from Online Store

  1. Click Edit your theme  edit code
  2. Search base.css

Thank you 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Arif, thank you for all your help so far.  Since you downloaded the theme file, could you tell me which specific css to look for since "base.css" is not one of the options.

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

Hi, Extremly sorry, not checked that your theme used app.css you can insert at the end of the file or at the end of theme.liquid file

 

 <style>
 .thb-header-right {
    position: relative;
}

.thb-header-right .social-links {
    position: absolute;
    top: 42px;
    right: 0;
    display: flex;
    gap: 15px;
}

.thb-header-right .social-links li {
    margin-bottom: 0;
    line-height: 0;
    padding: 5px;
}

.thb-header-right .social-links li a {
    height: 0;
    display: contents;
}

.thb-header-right .social-links span {
    display: none;
}
</style>

 

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

Is there any way to invert the color of the icons when the white background is not present?  It doesn't look good when the white background isn't present:

Screenshot 2024-05-15 at 5.31.40 PM.pngScreenshot 2024-05-15 at 5.31.35 PM.png

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

hi, @pjcasgui 
Use this css

<style> 
.header.transparent--true:not(:hover):not(.is-sticky) .social-links li a svg path{
     color: #da0707 !important;
    stroke: red;
    fill: red;
}

</style>

 

You can change the color which you need, I have set red. Now when hover it show correct one and new CSS will change CSS for transparent header.
Hope this issue will work for you.

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
pjcasgui
Tourist
15 1 0

So far so good Arif!  One last question, how do I disable the social media icons from showing on the mobile devices?

Arif_Shopidevs
Shopify Partner
135 18 13

This is an accepted solution.

 

Hi,

Use this css it will hide in mobile.
@media all and (max-width: 479px) {
.header.social-links{
display:none;
}

}

 

If the issus is solved like and click as solution the post. 🙂

 

Thank you 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers