Dawn theme menu bar background color only on scrolldown

Store Design
, ,
1

Hey, I’ve been trying to figure out how to make it so that the navbar menus background is transparent when the page loads, but when the user scrolls down it should change to the currently set black color? I hope this is understandable, thank you very much.

2

what’s your store url ?

3

https://somnusclothing.com

thank you :slightly_smiling_face:

4

Hi @nemadam

Please share me the store url & password (if applicable) to let me check and give you the solution

5

AsadMahmood_0-1746088754946.png
AsadMahmood_0-1746088754946.png1089×518 10.8 KB

6

sorry, password has been removed

7

Hi, I’ve temporarily removed the password https://somnusclothing.com

8

bump

9

Hi @nemadam

please follow my step below :
go to Shopify Admin → Sales Channels → Online Store → Themes → click Edit Code your current theme.

Let find the file theme.liquid to add this code to body class (see my attachment):

{% endif %} {% if template == 'index' %}is-homepage{% endif %}

BiDealDiscount_0-1746182197693.png
BiDealDiscount_0-1746182197693.png1593×904 141 KB

After that, search file base.css then add this class to end of this file:

body.is-homepage .shopify-section-header-sticky:not(.scrolled-past-header) .header-wrapper {
  position: fixed;
  width: 100%;
  background: transparent;
}

BiDealDiscount_1-1746182507279.png
BiDealDiscount_1-1746182507279.png1376×954 121 KB

10

Helllo @nemadam

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search theme.liquid

  • Please Insert the provided Script code at the above of the closing of the body tag. SS : https://prnt.sc/8cB-_jozXHnh

window.addEventListener('scroll', function() {
  const scrollPosition = window.scrollY;
  const scrollThreshold = 100;
  const element = document.querySelector('sticky-header.header-wrapper');
  if (scrollPosition > scrollThreshold) {
    element.style.backgroundColor = 'black';
  } else {
    element.style.backgroundColor = 'transparent';
  }
});
  • Please search base.css
  • Insert the provided CSS code at the end of the file and save the changes.
sticky-header.header-wrapper
{
   background: transparent;
}
section#shopify-section-template--25094993412433__custom_liquid_7JwbHb
{
   margin-top: -84px;
}

If you have any queries, then please share your store URL and password.

Please hit Like and Mark it as a Solution if you find our reply helpful.

1 Like