the header color is shown on desktop view but not shown on mobile view

Solved

the header color is shown on desktop view but not shown on mobile view

DandSmart
Tourist
14 0 3

this is the code of theme.liquid plzz someone check it

{% liquid
assign theme_rtl = false
if settings.rtl_enable and settings.langauges_rtl == blank
assign theme_rtl = true
endif

if settings.rtl_enable and settings.langauges_rtl != blank
assign rtl_languages = settings.langauges_rtl | split: ','
for language in rtl_languages
if language == request.locale.iso_code
assign theme_rtl = true
endif
endfor
endif
%}

<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js supports-no-cookies" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js supports-no-cookies" lang="{{ request.locale.iso_code }}" {% if theme_rtl %}dir="rtl"{% endif %}> <!--<![endif]-->

<head>
<!-- Basic and Helper page needs -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_primary }}">
<link rel="canonical" href="{{ canonical_url }}">

<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://ajax.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">

{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
{%- endif -%}

<!-- Title and description -->
<title>
{{ page_title -}}
{%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} &ndash; 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 %}

<!-- Helpers -->
{%- render 'social-meta-tags', product: product, article: article -%}

{%- render 'typography-and-color' -%}

<!-- Header hook for plugins -->
{{ content_for_header }}
{%- render 'oldIE-js' -%}

<!-- CSS -->
{%- render 'header-css' -%}

{%- if settings.mrn_custom_css != '' -%}
<style>
{{ settings.mrn_custom_css }}
</style>
{%- endif -%}

<!-- JS -->
{%- render 'header-js' -%}

{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}
</head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template.name | handle }}" >
{%- if settings.enable_preloader -%}
{%- render 'preloader' -%}
{%- endif -%}

{%- if template == 'index' and settings.newsletter_popup_enable -%}
{%- render 'newsletter-popup' -%}
{%- endif -%}

<div class="wrapper{% if settings.box_layout_enable %} wrapper-box{% endif %}">
{% sections 'header-group' %}

{% liquid
assign breadcrumb = true
if template == '404' or template == 'customers/login' or template == 'customers/register' or template == 'customers/account' or template == 'customers/activate_account' or template == 'customers/addresses' or template == 'customers/order' or template == 'customers/reset_password'
assign breadcrumb = false
endif
%}

{%- if template != 'index' and breadcrumb -%}
{%- if template == 'collection' -%}
{% if collection.handle == 'all' %}
{%- section 'breadcrumb' -%}
{%- endif -%}
{%- else -%}
{%- section 'breadcrumb' -%}
{%- endif -%}
{%- endif -%}
<main>
{{ content_for_layout }}
</main>

{% sections 'footer-group' %}
</div>

{%- if settings.compare_product_enalbe -%}
{%- render 'compare-popup' -%}
{%- endif -%}
<!-- Necessary JS -->
{%- render 'footer-js' -%}

{%- if settings.body_bg_color != blank and settings.body_bg_color_enable -%}
<style>
html, body, .slick-append{
background: {{ settings.body_bg_color }};
}
</style>
{% endif %}

{%- if settings.common_color_enable -%}
<style>
:root {
--black: {{ settings.common_color_black }};
--white: {{ settings.common_color_white }};
--border-color-1: {{ settings.border_color_1 }};
--section-bg-1: {{ settings.section_bg_color_1 }};
}
.slick-arrow-1 .slick-arrow {
color: {{ settings.carousel_arrow_color }}!important;
}
</style>
{%- endif -%}

{% include 'cjpod' %}
<style>
.header {
background: black !important;
}
</style>
</body>
</html>

Screenshot (54).pngScreenshot (55).pngScreenshot (56).png



Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

This is an accepted solution.

Hi @DandSmart 

Please add this code to your theme.liquid before </head> tag 

<style>
.mobile-header-area { background: #000; }
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Reply 1 (1)

Dan-From-Ryviu
Shopify Partner
8380 1649 1660

This is an accepted solution.

Hi @DandSmart 

Please add this code to your theme.liquid before </head> tag 

<style>
.mobile-header-area { background: #000; }
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.