Compatability: Dawn 2.0 to Shopify 3.0
I am aware that some you are frustrated with my other code so I made a code easier to follow. I added a code that would calculate the header, which can be use to measure how much we bring the content up.
NOTE: Please be mindful on what is the background image and adjust the font-color accordingly.
To start:
1. Go to your Admin store > Online Store > Themes > Actions > Edit code.
2. Open the header.liquid under the Sections folder.
3. Paste the code below, after the <noscript> section.
| {% if template == 'index' %} <style> #MainContent { margin-top: -115px; } @media only screen and (max-width: 950px) { #MainContent { margin-top: -65px; } } sticky-header .header { padding-top: 0 ; padding-bottom: 0; } .transparent-header { background: transparent !important; } </style> <script> document.addEventListener("DOMContentLoaded", function(event) { const stickyHead = document.querySelector(".header-wrapper"); const resizeObserver = new ResizeObserver(entries => { const shopifyHeader = document.querySelector("#shopify-section-header"); const mainContent = document.querySelector("#MainContent"); mainContent.style.marginTop = "-" + shopifyHeader.clientHeight + "px"; window.addEventListener('scroll', event => { if (window.scrollY > 200) { stickyHead.classList.remove('transparent-header') } else { stickyHead.classList.add('transparent-header') } }) }); resizeObserver.observe(stickyHead); }) </script> {% endif %} |
4. Next, find the "header-wrapper ", then paste the code below next to it.
| transparent-header |
Is the menu font not legible? Change the color scheme in the header section when you open the theme editor. No extra code needed for that. I advised using the inverse.
That's it. No more DevTools (",)