Why isn't the sticky header option working after modifying the craft theme?

Store Design
1

Hello community, Thank you all for contribution to make our experience better and easy in shopify , i have a question:

i’m using craft theme, so by clicking on the header i can select from the menu if always sticky or none and it’s working perfectly, recently i made changes so that i can make a transparent header to the slideshow and the changes was:

Add code in header.liquid#### Add the following code in header.liquid

Replace the following code

<header class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">

With the following code

<header id="site-header" class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %} {% if section.settings.transparent_header %}site-header-transparent{% endif %}">

Add the following code in header.liquid

Replace the following code

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

With the following code

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary id="header-menu" class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

Add the following code in header.liquid

Replace the following code

<details-modal class="header__search">

With the following code

<details-modal id="header-search" class="header__search">

Add code in header.liquid above {% schema %}

{% if template == 'index' and section.settings.transparent_header %}
{% style %}
  .template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
    color: {{ section.settings.content_color }};
   }
   .site-header-transparent {
     background: transparent;
     position: absolute;
     border: none;
     width: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
   .site-header-transition {
      margin-top: var(--header-height);
   }
{% endstyle %}
<!--- Coded by websensepro.com - youtube.com/c/websensepro --->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var headerHeight = document.getElementById('site-header').offsetHeight;
    document.getElementById('MainContent').style.setProperty('--header-height', '-'+ headerHeight + 'px');
  });
  window.onscroll = function() {
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset > height ) {
      header.classList.remove('site-header-transparent');
      main.classList.add('site-header-transition');
    } else {
      header.classList.add('site-header-transparent');
      main.classList.remove('site-header-transition');
    }
  }
  document.getElementById("header-menu").addEventListener('click',function () {
    var sideMenu = document.getElementById('Details-menu-drawer-container');
    var header = document.getElementById('site-header');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
    if (!sideMenu.classList.contains('menu-opening')) {
      header.classList.remove('site-header-transparent');
    } else {
      header.classList.add('site-header-transparent');
    }
    }
  });
  document.getElementById("header-search").addEventListener('click',function () {
    var search = document.getElementById('template-index');
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
      if (search.classList.contains('overflow-hidden')) {
        header.classList.remove('site-header-transparent');
        main.classList.add('site-header-transition');
      } else {
        header.classList.add('site-header-transparent');
        main.classList.remove('site-header-transition');
      }
    }
  });
</script>
{% endif %}

header.liquid with in Scheme code below “t:sections.all.colors.label”

{
      "type": "header",
      "content": "Transparent Header"
    },
    {
      "type": "checkbox",
      "id": "transparent_header",
      "label": "Enable transparent header",
      "default": false
    },
    {
      "type": "color",
      "id": "content_color",
      "label": "Change icon & text color"
    },

Add code in theme.liquid#### Theme.liquid

Replace the following code

<body class="gradient">

With the following code

<body {% if template == 'index' %}id="template-index"{% endif %} class="gradient {% if template == 'index' %}template-index{% endif %}">

And i’ve got the transparent header option on my customization

IMG_0493.jpeg
IMG_0493.jpeg2627×1556 382 KB

After this changes the sticky option is not working at all, appreciate the support in advance

Thank you..

2

It seems like you have already made the necessary changes to enable the transparent header in your Craft theme. However, if you’re experiencing issues or need further customization, here are some steps you can follow:

  1. To center the main menu:

    • Locate the CSS code responsible for positioning the main menu in your theme’s stylesheet.
    • Add the following CSS properties to center align the main menu:
.header__navigation {
  display: flex;
  justify-content: center;
}
​

Save the changes and check if the main menu is now centered on your website.

  • To customize the add to cart button:

    • Find the code responsible for rendering the add to cart button in your theme’s liquid files. This is typically located in the product template file (e.g., product.liquid).
    • Look for the HTML code that generates the add to cart button and modify it according to your desired design. You can refer to the image you mentioned (image 2) as a reference for the button’s appearance.
    • Customize the button’s HTML structure, classes, and styles to achieve the desired look.
    • Save the changes and preview the product page to see the updated add to cart button.