Transparent Header Menu Over Image Banner

BentleyAndKait
New Member
12 0 0

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!

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 148
  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';
  }
});
​

 

BentleyAndKait
New Member
12 0 0

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.

muzzamazza
Tourist
9 1 0

Amazing, this worked perfectly, thanks! 

muzzamazza
Tourist
9 1 0

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!