Cart drawer title not showing

[AnSrSi]

Hi there,

The cart drawer in my website doesn't have a title. I thought it would be problem of the theme. But when I checked the cart-drawer.liquid file it contains a division for the cart header. This the code I saw in the file 

<div class="drawer__header">
        <h2 class="drawer__heading">{{ 'sections.cart.title' | t }}</h2>
        <button
          class="drawer__close"
          type="button"
          onclick="this.closest('cart-drawer').close()"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>

But the cart heading is not visible.

And one more thing, I need to add a line seperating the header from the cart like this 

https://www.valcoure.store/

password - kothavara

Thank You

[devcoders]

Hello @AnSrSi 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

.drawer__header {
border-bottom: solid 1px #efe5e5;
margin-bottom: 20px;
}

[AnSrSi]

Hi @devcoders,

Thanks for your reply, but the header title is not visible when there are no products in the cart. 

[AnSrSi]

This is some code snippets in the cart-drawer.liquid file which I think is the code for the empty cart drawer 

<cart-drawer class="drawer{% if cart == empty %} is-empty{% endif %}">
  <div id="CartDrawer" class="cart-drawer">
    <div id="CartDrawer-Overlay" class="cart-drawer__overlay"></div>
    <div
      class="drawer__inner gradient color-{{ settings.cart_color_scheme }}"
      role="dialog"
      aria-modal="true"
      aria-label="{{ 'sections.cart.title' | t }}"
      tabindex="-1"
    >
      {%- if cart == empty -%}
        <div class="drawer__inner-empty">
          <div class="cart-drawer__warnings center{% if settings.cart_drawer_collection != blank %} cart-drawer__warnings--has-collection{% endif %}">
            <div class="cart-drawer__empty-content">
              <h2 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h2>
              <button
                class="drawer__close"
                type="button"
                onclick="this.closest('cart-drawer').close()"
                aria-label="{{ 'accessibility.close' | t }}"
              >
                <span class="svg-wrapper">
                  {{- 'icon-close.svg' | inline_asset_content -}}
                </span>
              </button>
              <a href="{{ routes.all_products_collection_url }}" class="button">
                {{ 'general.continue_shopping' | t }}
              </a>

              {%- if shop.customer_accounts_enabled and customer == null -%}
                <p class="cart__login-title h3">{{ 'sections.cart.login.title' | t }}</p>
                <p class="cart__login-paragraph">
                  {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
                </p>
              {%- endif -%}
            </div>
          </div>
          {%- if settings.cart_drawer_collection != blank -%}
            <div class="cart-drawer__collection">
              {% render 'card-collection', card_collection: settings.cart_drawer_collection, columns: 1 %}
            </div>
          {%- endif -%}
        </div>
      {%- endif -%}
      <div class="drawer__header">
        <h2 class="drawer__heading">{{ 'sections.cart.title' | t }}</h2>
        <button
          class="drawer__close"
          type="button"
          onclick="this.closest('cart-drawer').close()"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>

[devcoders]

Hello @AnSrSi 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

cart-drawer.is-empty .drawer__header {
display: block;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}

[AnSrSi]

Thank You @devcoders, but it is not working.

Can you check if I can do anything the code from cart-drawer.liquid I have sent 

[devcoders]

Hello @AnSrSi 

You haven't added this CSS in base.css. Please add it, save the file, and then check.

cart-drawer.is-empty .drawer__header {
display: block;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}

[AnSrSi]

Not Working

[devcoders · Accepted solution]

Hello @AnSrSi 

Add this css.

cart-drawer.is-empty .drawer__header {
display: block!important;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}

[AnSrSi]

Thank You @devcoders , Its working now.

[devcoders]

Hello @AnSrSi 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.