using both cart icon + text prestige theme

Highlighted
Tourist
9 0 5

Hello i currently am customising the prestige them and it looks like you can use either icon or text for cart in header.

I was wondering if it is possible to show icon with cart text next to it?

and if so what code would i use.

preview can be found here.

https://9j8z0t1cxa5akxf1-1326317630.shopifypreview.com

1 Like
Highlighted
Shopify Partner
7473 1034 2599

Hello, @russgera 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your header code so i will check and update,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
9 0 5

Here is the code from the assets 

is this what you were looking for or from sections?

theme.scss.liquid

 

 

 

* ----------------------------------------------------------------------------
* Main header
* ----------------------------------------------------------------------------
*/

.shopify-section--header {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 5;
}

.Header .Heading,
.Header .Link--secondary,
.Header .Link--primary:hover {
color: $header-heading-color;
}

.Header .Text--subdued,
.Header .Link--primary,
.Header .Link--secondary:hover {
color: $header-light-text-color;
}

.Header {
height: 65px;
background: rgba(150, 150, 150, 0.7);
color: $header-heading-color;
box-shadow: 0px $header-border-color inset;
transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.Header__Wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 18px;
}

.Header__Logo {
position: relative;
margin-bottom: 0px;
}

.Header__LogoLink,
.Header__LogoImage {
display: block;
}

.Header__LogoImage {
margin: 0 auto;
transition: opacity 0.3s ease-in-out;
}

.Header__LogoImage--transparent {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.Header__Icon {
display: inline-block;
line-height: 1;
transition: color 0.2s ease-in-out;

span {
display: block;
}
}

.Header__Icon + .Header__Icon {
margin-left: 18px;
}

.supports-sticky .Search[aria-hidden="true"] + .Header--transparent {
background: transparent;

.Header__LogoImage--primary:not(:only-child) {
opacity: 0;
}

.Header__LogoImage--transparent {
opacity: 1;
}

.Header__Icon svg {
-webkit-filter: drop-shadow(0 1px rgba(#000000,0.25));
filter: drop-shadow(0 1px rgba(#000000,0.25));
}

.Header__Icon,
.Header__CurrencySelector,
.HorizontalList__Item > .Heading,
.Header__LogoLink > .Heading,
.Text--subdued {
color: currentColor;
}
}

.Header__Icon .Icon--nav {
height: 14px;
width: 20px;
}

.Header__Icon .Icon--cart {
width: 17px;
height: 20px;
}

.Header__Icon .Icon--search {
position: relative;
top: 1px; /* for pixel perfect */
width: 18px;
height: 17px;
}

.Header__FlexItem {
display: flex;
}

.Header__FlexItem--fill {
flex: 1 0 0;
align-items: center;

&:last-child {
justify-content: flex-end;
}
}

.Header__CartDot {
position: absolute;
top: 2px;
right: -6px;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: $header-heading-color;
box-shadow: 0 0 0 2px $header-background;
transform: scale(0);
transition: all 0.3s ease-in-out;
}

.Header__CartDot.is-visible {
transform: scale(1);
}

.Search[aria-hidden="true"] + .Header--transparent .Header__CartDot {
box-shadow: none;
background-color: currentColor;
}

@include av-mq('tablet-and-up') {
.Header__Wrapper {
padding: 18px 30px;
}

.Header__LogoImage {
max-width: 100%;
}

.Header__Icon + .Header__Icon {
margin-left: 25px;
}

.Header__Icon .Icon--nav-desktop {
height: 17px;
width: 24px;
}

.Header__Icon .Icon--cart-desktop {
height: 23px;
width: 19px;
}

.Header__Icon .Icon--search-desktop {
position: relative;
top: 2px; /* for pixel perfect alignment with the cart icon */
width: 21px;
height: 21px;
}

.Header__Icon .Icon--account {
position: relative;
top: 2px; /* for pixel perfect alignment with the cart icon */
width: 20px;
height: 20px;
}

.Header--withIcons .Header__SecondaryNav {
position: relative;
top: 1px; /* for pixel perfect alignment with icons */
margin-right: 32px;
}
}

@include av-mq('desk') {
.js .Header__Wrapper {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.Header:not(.Header--sidebar) .Header__Wrapper {
padding: 18px 50px;
}

.Header__CurrencySelector {
display: inline-block;
}

.Header__MainNav {
margin-right: 45px;
}

.Header--inline, .Header--logoLeft {
.Header__FlexItem:first-child .Header__CurrencySelector {
display: none;
}
}

.Header--logoLeft {
.Header__FlexItem--logo {
order: -1;
margin-right: 38px;
}

.Header__FlexItem--fill:last-child {
flex: none;
}
}

/*
.Header--center {
.Header__Wrapper.Header__Wrapper {
padding-bottom: 24px;
}

.Header__MainNav {
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 18px;
width: 100%;
text-align: center;
}

.Header__MainNav .HorizontalList {
margin-left: 0;
margin-right: 0;
}

.Header__FlexItem {
margin-bottom: 30px; //margin-bottom: 40px;
}

.Header__FlexItem:last-child .Header__CurrencySelector {
display: none;
}
}
*/

.Header--initialized .Header__Wrapper {
opacity: 1;
}
}

/* moved out of breakpoint, because what does it metter when the navigation is hidden on smaller screens. */
.Header--center {
.Header__Wrapper.Header__Wrapper { /* Ugly hack to increase CSS precedence */
padding-bottom: 24px;
}

.Header__MainNav {
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 18px;
width: 100%;
text-align: center;
}

/* Ugly hack !! */
.Header__MainNav .HorizontalList {
margin-left: 0;
margin-right: 0;
}

/*.Header__FlexItem {
margin-bottom: 30px; //margin-bottom: 40px;
}*/

.Header__FlexItem:last-child .Header__CurrencySelector {
display: none;
}
}

@include av-mq('lap-and-up') {
.Header__FlexItem {
margin-bottom: 0px; //margin-bottom: 40px;
}
}

0 Likes
Highlighted
Shopify Partner
7473 1034 2599

@russgera 

Yes i need section code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
9 0 5
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
 
{%- capture section_settings -%}
{
  "navigationStyle": {{ section.settings.navigation_style | json }},
  "hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
  "isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}
 
<header id="section-{{ section.id }}"
        class="Header Header--{{ section.settings.navigation_style }} {% if section.settings.navigation_style != 'inline' and section.settings.navigation_style != 'logoLeft' %}Header--initialized{% endif %} {% if use_transparent_header %}Header--transparent{% endif %} {% if section.settings.show_icons or section.settings.navigation_style == 'sidebar' %}Header--withIcons{% endif %}"
        data-section-id="{{ section.id }}"
        data-section-type="header"
        data-section-settings='{{ section_settings }}'
        role="banner">
  <div class="Header__Wrapper">
    <div class="Header__FlexItem Header__FlexItem--fill">
      <button class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-lap-and-up{% endunless %}" aria-expanded="false" data-action="open-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.open_sidebar' | t }}">
        <span class="hidden-tablet-and-up">{%- include 'icon' with 'nav' -%}</span>
        <span class="hidden-phone">{%- include 'icon' with 'nav-desktop' -%}</span>
      </button>
 
      {%- comment -%}
      --------------------------------------------------------------------------------------------------------------------
      DESKTOP NAVIGATION (if not using the sidebar mode)
      --------------------------------------------------------------------------------------------------------------------
      {%- endcomment -%}
 
      {%- unless use_sidebar_menu -%}
        {%- assign main_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%}
        {%- assign main_menu = linklists[main_menu_handle] -%}
 
        {%- assign mega_menu_names = '' -%}
 
        {%- for block in section.blocks -%}
          {%- if block.type == 'mega_menu' -%}
            {%- assign trim_mega_menu_name = block.settings.navigation_mega_menu | strip -%}
            {%- assign mega_menu_names = mega_menu_names | append: trim_mega_menu_name | append: ',' -%}
          {%- endif -%}
        {%- endfor -%}
 
        {%- assign mega_menu_names = mega_menu_names | downcase | split: ',' | compact -%}
 
        <nav class="Header__MainNav hidden-pocket" aria-label="{{ 'header.navigation.title' | t }}">
          <ul class="HorizontalList HorizontalList--spacingExtraLoose">
            {%- for link in main_menu.links -%}
              {%- assign downcased_link_title = link.title | downcase | strip -%}
              {%- assign use_mega_menu = false -%}
 
              {%- capture menu_item_dropdown -%}
                {%- if mega_menu_names contains downcased_link_title -%}
                  {%- for block in section.blocks -%}
                    {%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}
 
                    {%- if downcased_mega_menu_name != downcased_link_title -%}
                      {%- continue -%}
                    {%- endif -%}
 
                    {%- assign use_mega_menu = true -%}
                    {%- assign push_image_count = 0 -%}
 
                    {%- if block.settings.push_1_image -%}
                      {%- assign push_image_count = push_image_count | plus: 1 -%}
                    {%- endif -%}
 
                    {%- if block.settings.push_2_image -%}
                      {%- assign push_image_count = push_image_count | plus: 1 -%}
                    {%- endif -%}
 
                    {%- assign should_space_evenly = false -%}
 
                    {%- if push_image_count == 0 and link.links.size <= 3 -%}
                      {%- assign should_space_evenly = true -%}
                    {%- endif -%}
 
                    {%- if push_image_count == 1 and link.links.size == 1 -%}
                      {%- assign should_space_evenly = true -%}
                    {%- endif -%}
 
                    {%- if push_image_count == 2 and link.links.size == 1 -%}
                      {%- assign should_space_evenly = true -%}
                    {%- endif -%}
 
                    <div class="MegaMenu {% if push_image_count != 0 and link.links.size == 0 %}MegaMenu--spacingCenter{% elsif should_space_evenly %}MegaMenu--spacingEvenly{% endif %} {% if push_image_count == 0 and link.links.size > 4 %}MegaMenu--grid{% endif %}" aria-hidden="true" {{ block.shopify_attributes }}>
                      <div class="MegaMenu__Inner">
                        <div class="MegaMenu__Inner">
                        
 
                        {% capture first_column %}
                          {%- for sub_link in link.links -%}                        
                              {%- if sub_link.links == blank -%}
                                    <li class="Linklist__Item">
                                      <a href="{{ sub_link.url }}" class="MegaMenu__Title Heading u-h7">{{ sub_link.title | title }}</a>
                                    </li>
                              {% endif %}                        
                          {%- endfor -%}
                        {% endcapture %}
            
                        {% if first_column != blank %}
                          <div class="MegaMenu__Item MegaMenu__Item--fit MegaMenu__Item--first">
                            <ul class="Linklist">
                              {{ first_column }}
                            </ul>
                          </div>
                        {% endif %}
 
                        
                        {%- for sub_link in link.links -%}                        
                          {%- if sub_link.links != blank -%}
                          <div class="MegaMenu__Item MegaMenu__Item--fit">
                            <a href="{{ sub_link.url }}" class="MegaMenu__Title Heading Text--subdued u-h7">{{ sub_link.title | title }}</a>
 
                            <ul class="Linklist">
                              {%- for sub_sub_link in sub_link.links -%}
                              <li class="Linklist__Item">
                                <a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
                              </li>
                              {%- endfor -%}
                            </ul>
 
                          </div>
                          {%- endif -%}                        
                        {%- endfor -%}
 
                        
                        {%- if push_image_count > 0 -%}
                          <div class="MegaMenu__Item" style="{% if push_image_count == 1 %}width: 370px; min-width: 250px;{% else %}width: 660px; min-width: 425px;{% endif %}">
                            {%- if block.settings.push_1_image -%}
                              <div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
                                {%- if block.settings.push_1_url != blank -%}
                                  <a class="MegaMenu__PushLink" href="{{ block.settings.push_1_url }}">
                                {%- endif -%}
 
                                {%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}
 
                                <div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
                                  <img class="Image--lazyLoad Image--fadeIn"
                                       data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
                                       alt="{{ block.settings.push_1_image.alt | escape }}">
 
                                  <span class="Image__Loader"></span>
                                </div>
 
                                {%- if block.settings.push_1_heading != blank -%}
                                  <p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_1_heading | escape }}</p>
                                {%- endif -%}
 
                                {%- if block.settings.push_1_subheading != blank -%}
                                  <p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_1_subheading | escape }}</p>
                                {%- endif -%}
 
                                {%- if block.settings.push_1_url != blank -%}
                                  </a>
                                {%- endif -%}
                              </div>
                            {%- endif -%}
 
                            {%- if block.settings.push_2_image -%}
                              <div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
                                {%- if block.settings.push_2_url != blank -%}
                                  <a class="MegaMenu__PushLink" href="{{ block.settings.push_2_url }}">
                                {%- endif -%}
 
                                {%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}
 
                                <div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
                                  <img class="Image--lazyLoad Image--fadeIn"
                                       data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
                                       alt="{{ block.settings.push_2_image.alt | escape }}">
 
                                  <span class="Image__Loader"></span>
                                </div>
 
                                {%- if block.settings.push_2_heading != blank -%}
                                  <p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_2_heading | escape }}</p>
                                {%- endif -%}
 
                                {%- if block.settings.push_2_subheading != blank -%}
                                  <p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_2_subheading | escape }}</p>
                                {%- endif -%}
 
                                {%- if block.settings.push_2_url != blank -%}
                                  </a>
                                {%- endif -%}
                              </div>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                          </div>
                      </div>
                    </div>
                  {%- endfor -%}
                {%- elsif link.links != blank -%}
                  <div class="DropdownMenu" aria-hidden="true">
                    <ul class="Linklist">
                      {%- for sub_link in link.links -%}
                        <li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
                          <a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}</a>
 
                          {%- if sub_link.links != blank -%}
                            <div class="DropdownMenu" aria-hidden="true">
                              <ul class="Linklist">
                                {%- for sub_sub_link in sub_link.links -%}
                                  <li class="Linklist__Item">
                                    <a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
                                  </li>
                                {%- endfor -%}
                              </ul>
                            </div>
                          {%- endif -%}
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                {%- endif -%}
              {%- endcapture -%}
 
              <li class="HorizontalList__Item {% if link.links == blank and link.active %}is-active{% endif %}" {% if menu_item_dropdown != blank %}aria-haspopup="true"{% endif %}>
                <a href="{{ link.url }}" class="Heading u-h6">
                  {{- link.title | escape -}}
 
                  {%- if use_mega_menu or menu_item_dropdown == blank -%}
                    <span class="Header__LinkSpacer">{{ link.title | escape }}</span>
                  {%- endif -%}
                </a>
 
                {{- menu_item_dropdown -}}
              </li>
            {%- endfor -%}
          </ul>
        </nav>
 
        {{- currency_conversion_select -}}
      {%- endunless -%}
    </div>
 
    {%- capture header_logo -%}
      <a href="{{ routes.root_url }}" class="Header__LogoLink">
        {%- if section.settings.logo != blank -%}
          {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
 
          <img class="Header__LogoImage Header__LogoImage--primary"
               src="{{ section.settings.logo | img_url: image_size }}"
               srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
               width="{{ section.settings.logo_max_width }}"
               alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
 
          {%- if use_transparent_header and section.settings.transparent_logo != blank -%}
            <img class="Header__LogoImage Header__LogoImage--transparent"
                 src="{{ section.settings.transparent_logo | img_url: image_size }}"
                 srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
                 width="{{ section.settings.logo_max_width }}"
                 alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
          {%- endif -%}
        {%- else -%}
          <span class="Heading u-h4">{{ shop.name }}</span>
        {%- endif -%}
      </a>
    {%- endcapture -%}
 
    <div class="Header__FlexItem Header__FlexItem--logo">
      {%- if template == 'index' -%}
        <h1 class="Header__Logo">{{ header_logo }}</h1>
      {%- else -%}
        <div class="Header__Logo">{{ header_logo }}</div>
      {%- endif -%}
    </div>
 
    <div class="Header__FlexItem Header__FlexItem--fill">
      {%- unless section.settings.show_icons or use_sidebar_menu -%}
        <nav class="Header__SecondaryNav hidden-phone">
          <ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
            {%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' or section.settings.navigation_style == 'logoLeft' -%}
              <li class="HorizontalList__Item">
                {{ currency_conversion_select }}
              </li>
            {%- endif -%}
 
            {%- if shop.customer_accounts_enabled -%}
              <li class="HorizontalList__Item">
                <a href="{{ routes.account_url }}" class="Heading Link Link--primary Text--subdued u-h8">
                  {{- 'header.navigation.account' | t -}}
                </a>
              </li>
            {%- endif -%}
 
            <li class="HorizontalList__Item">
              <a href="{{ routes.search_url }}" class="Heading Link Link--primary Text--subdued u-h8" data-action="toggle-search">{{ 'header.navigation.search' | t }}</a>
            </li>
 
            <li class="HorizontalList__Item">
              <a href="{{ routes.cart_url }}" class="Heading u-h6" {% unless template == 'cart' or settings.cart_type == 'page' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endunless %}>{{ 'header.navigation.cart' | t }} (<span class="Header__CartCount">{{ cart.item_count }}</span>)</a>
            </li>
          </ul>
        </nav>
      {%- elsif settings.currency_conversion_enabled -%}
        <nav class="Header__SecondaryNav">
          <ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
            <li class="HorizontalList__Item">
              {{ currency_conversion_select }}
            </li>
          </ul>
        </nav>
      {%- endunless -%}
 
      {%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}
        <a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
          {%- include 'icon' with 'account' -%}
        </a>
      {%- endif -%}
 
      <a href="{{ routes.search_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" data-action="toggle-search" aria-label="{{ 'header.navigation.search' | t }}">
        <span class="hidden-tablet-and-up">{%- include 'icon' with 'search' -%}</span>
        <span class="hidden-phone">{%- include 'icon' with 'search-desktop' -%}</span>
      </a>
 
      <a href="{{ routes.cart_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
        <span class="hidden-tablet-and-up">{%- include 'icon' with 'cart' -%}</span>
        <span class="hidden-phone">{%- include 'icon' with 'cart-desktop' -%}</span>
        <span class="Header__CartDot {% if cart.item_count > 0 %}is-visible{% endif %}"></span>
      </a>
    </div>
  </div>
 
 
</header>
 
<style>
  {%- if section.settings.use_sticky_header -%}
    :root {
      --use-sticky-header: 1;
      --use-unsticky-header: 0;
    }
 
    .shopify-section--header {
      position: -webkit-sticky;
      position: sticky;
    }
  {%- else -%}
    :root {
      --use-sticky-header: 0;
      --use-unsticky-header: 1;
    }
  {%- endif -%}
 
  {%- if section.settings.logo -%}
      .Header__Logo {
        padding: {{ section.settings.logo_padding }}px 0;
      }
      
    @media screen and (max-width: 640px) {
      .Header__LogoImage {
        max-width: {{ section.settings.mobile_logo_max_width }}px;
      }
    }
  {%- endif -%}
 
  {%- if use_transparent_header -%}
    :root {
      --header-is-not-transparent: 0;
      --header-is-transparent: 1;
    }
 
    .shopify-section--header {
      margin-bottom: calc(-1 * var(--header-height));
    }
 
    .supports-sticky .Search[aria-hidden="true"] + .Header--transparent {
      {%- if section.settings.show_transparent_header_border -%}
        box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset;
      {%- else -%}
        box-shadow: none;
      {%- endif -%}
 
      color: {{ section.settings.transparent_text_color }};
    }
  {%- else -%}
    :root {
      --header-is-not-transparent: 1;
      --header-is-transparent: 0;
    }
  {%- endif -%}
</style>
 
<script>
  document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>
 
{% schema %}
{
  "name": "Header",
  "class": "shopify-section--header",
  "settings": [
    {
      "type": "checkbox",
      "id": "use_sticky_header",
      "label": "Use sticky header",
      "default": true
    },
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Image",
      "info": "200 x 60px .png recommended"
    },
{
"type": "range",
"id": "logo_padding",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Logo padding",
"default": 0
},
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 50,
      "max": 350,
      "step": 5,
      "unit": "px",
      "label": "Image width",
      "default": 140
    },
    {
      "type": "range",
      "id": "mobile_logo_max_width",
      "min": 50,
      "max": 200,
      "step": 5,
      "unit": "px",
      "label": "Mobile image width",
      "default": 90
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "link_list",
      "id": "navigation_menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "select",
      "id": "navigation_style",
      "label": "Navigation style",
      "info": "Setting will default to center style if screen width cannot fit all the links.",
      "options": [
        {
          "value": "sidebar",
          "label": "Sidebar"
        },
        {
          "value": "inline",
          "label": "Inline"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "logoLeft",
          "label": "Logo left"
        }
      ],
      "default": "inline"
    },
    {
      "type": "checkbox",
      "id": "show_icons",
      "label": "Show icons",
      "info": "Text for account, search and cart are replaced by icons on desktop.",
      "default": false
    },
    {
      "type": "header",
      "content": "Transparent header"
    },
    {
      "type": "checkbox",
      "id": "enable_transparent_header",
      "label": "Enable on homepage",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_transparent_header_collection",
      "label": "Enable on collection pages",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_transparent_header_border",
      "label": "Show separation border",
      "default": true
    },
    {
      "type": "color",
      "id": "transparent_text_color",
      "label": "Text/icon color",
      "default": "#ffffff"
    },
    {
      "type": "image_picker",
      "id": "transparent_logo",
      "label": "Logo image",
      "info": "200 x 60px .png recommended"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "Mega menu",
      "settings": [
        {
          "type": "text",
          "id": "navigation_mega_menu",
          "label": "Menu item",
          "info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
        },
        {
          "type": "header",
          "content": "Image push 1"
        },
        {
          "type": "image_picker",
          "id": "push_1_image",
          "label": "Image",
          "info": "740 x 460 px .jpg recommended"
        },
        {
          "type": "text",
          "id": "push_1_heading",
          "label": "Heading",
          "default": "Example heading"
        },
        {
          "type": "text",
          "id": "push_1_subheading",
          "label": "Sub-heading",
          "default": "Example sub-heading"
        },
        {
          "type": "url",
          "id": "push_1_url",
          "label": "Link"
        },
        {
          "type": "header",
          "content": "Image push 2"
        },
        {
          "type": "image_picker",
          "id": "push_2_image",
          "label": "Image",
          "info": "740 x 460 px .jpg recommended"
        },
        {
          "type": "text",
          "id": "push_2_heading",
          "label": "Heading",
          "default": "Example heading"
        },
        {
          "type": "text",
          "id": "push_2_subheading",
          "label": "Sub-heading",
          "default": "Example sub-heading"
        },
        {
          "type": "url",
          "id": "push_2_url",
          "label": "Link"
        }
      ]
    }
  ]
}
{% endschema %}
0 Likes
Highlighted
Shopify Partner
7473 1034 2599

@russgera 

Thanks for code

i have check this code default code it's not there it can be some customization please PM 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes