Transparent Header Menu Over Image Banner

Store Design
, , , ,
1

Hey,

I was hoping you could help me figure out this menu customization on the Dawn Theme. I am working on AbbotCoffee.co password: showmp

I am trying to get my menu to be transparent and overlay the top of my image banner. Keeping the announcement section where it is. The menu will effectively look like it’s apart of the image banner.

I’d like it to be a sticky header on scroll up. When you scroll up, I’d like the menu background to be white instead of transparent. How would I go about doing that?

Thank you in advance!

2
  1. Open the header.liquid file.
  2. Look for the HTML element or class that wraps the menu section. It might be a nav or header element with a class such as site-header or main-header.
  3. Add a custom CSS class to the wrapping element. For example, you can add class="custom-header" to the nav or header element.
  4. In the same file, locate the CSS section or file. It could be a separate .css file or an embedded <style> block.
  5. Add the following CSS code to make the menu transparent and overlay the image banner:
.custom-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
}
​
  1. Save the changes to the header.liquid file.
  2. To make the menu background white on scroll up, you’ll need to add some JavaScript code. In the same header.liquid file or in a separate JavaScript file, add the following code:
window.addEventListener('scroll', function() {
  var header = document.querySelector('.custom-header');
  if (window.pageYOffset > 0) {
    header.style.backgroundColor = '#ffffff';
  } else {
    header.style.backgroundColor = 'transparent';
  }
});
​
2 Likes
3

I can’t seem to figure out where to input that code. Is there a way for me to send my header.liquid file? It won’t send through here for some reason.

4

Amazing, this worked perfectly, thanks!

5

Hi! This solution worked in my case where I only wanted the header background transparent.

However, my problem now is that on the mobile version when I expand the burger menu it just shows a grey semi-transparent layer with no menu links. I’d like this to be black text on white background as is for the cart and search (which btw work fine on mobile)

Inspecting it in the browser gives me this error:

global.js?v=74155653828737587811695285674:506 Uncaught TypeError: Cannot read properties of null (reading ‘classList’)
at HTMLElement.openMenuDrawer (global.js?v=74155653828737587811695285674:506:59)
at HTMLElement.onSummaryClick (global.js?v=74155653828737587811695285674:407:67)

my site www.muzzamazza.com pass: tiampa

Thanks in advance for your help!

6

Can you please dumb it down for me on points number 3 and 4. is this to replace the current field?

.section-header {
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

7

Thanks! for the javascript I was looking everywhere for it, It works perfectly :+1: just to be more attractive my suggestion for CSS :

.header-wrapper {
background: transparent;
border: none;
transition: background 0.3s, box-shadow 0.3s; /* Smooth transition */
position: absolute;
width: 100%;
}

.header-wrapper.scrolled {
background: rgba(255, 255, 255, 0.9); /* Slightly opaque background /
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); / Optional shadow for depth */
}

8

Here is the solution for transparent header:

9

hi, how would i make white or any colour of choice after scroll down?