How can I fixate my menu bar at the top of the hero section in CSS?

[adfarm]

 

Hi,

I need my menu bar to be fixed position at tol of the hero section. Just like this:

Need to fixate it on that position, so it’s not sticky while scrolling down the page. Just fixate at the top of the hero section like the image, so there is a section overlap. But I don’t want it to move / be sticky.

Anyone who can help me fixate it at top of the hero section?

This is the current css setting:  .header-wrapper {
position: fixed;
width: 100%;
}

site: adfarm.nl

theme: dawn

Looks good, but must be fixated. 

thank you in advance. 

[topnewyork]

Hi Adfarm,

Go to your Online store > Themes > Customize and select Header and scroll down Sticky header click and select none.

Kindly Remove this code:

This is the current css setting:  .header-wrapper {
position: fixed;
width: 100%;
}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[adfarm]

No, that’s not a solution. Then the menu bar is to high and does not overlap with the hero section.

I want the menu bar to be displayed in the top of the hero section, in front of the image. So the transparant menu bar is visible in front of the image. 

Look, to high: 

 

I want it to be IN the hero image, but not sticky. 

[adfarm]

@topnewyork please help me to find the solution. See my reply above.

[topnewyork]

Hello there,

Kindly Implement these.

.header-wrapper {
  position: absolute;
  width: 100%;
  background-color: transparent;
  z-index: 2; /* Ensure the menu bar is above other elements */
}

.hero-section {
  position: relative;
  z-index: 1; /* Ensure the hero section is behind the menu bar */
}

 
Thanks

[adfarm]

@topnewyork we are almost there. Homepage is great, but now the whole section also appears on the product page and other pages.

homepage must be transparant and with hero section. Other pages just black background color and without the hero section.

Look, this is not good:

 Product example: https://adfarm.nl/products/facebook-ads-tijdlijn-advertenties

Please tell me how to fix it

[topnewyork]

Hello there,

Kindly Implement these.

/* Apply to the homepage */
body.template-index .header-wrapper {
  position: absolute;
  width: 100%;
  background-color: transparent;
  z-index: 2;
}

body.template-index .hero-section {
  position: relative;
  z-index: 1;
}

/* Apply to other pages */
body:not(.template-index) .header-wrapper {
  width: 100%;
  background-color: black;
  z-index: 2;
}

 If I managed to help you then, don't forget to Like it and Mark it as Solution!

[adfarm]

@topnewyork  

I think you are almost there. Shopify gives an css error, can’t save it:

Please take a look. 

[topnewyork]

Hello there,

Online Store ->Theme ->Edit code

Assets ->Base.css

/* Apply to the homepage */
body.template-index .header-wrapper {
  position: absolute;
  width: 100%;
  background-color: transparent;
  z-index: 2;
}

body.template-index .hero-section {
  position: relative;
  z-index: 1;
}

/* Apply to other pages */
body:not(.template-index) .header-wrapper {
  width: 100%;
  background-color: black;
  z-index: 2;
}

  If I managed to help you then, don't forget to Like it and Mark it as Solution!

[adfarm]

@topnewyork 

Now the homepage is also black: adfarm.nl

Homepage menu has to be transparent. 

How to fix it? After that we are finished. I will leave like and mark as solution. 

[adfarm]

@topnewyork 

I have tried this code in theme liquid: 

{% if template.name == 'index' %}
<style>
.header-wrapper {
position: absolute !important;
width: 100% !important;
top: 0px !important;
background-color: transparent !important;
}
</style>
{% endif %}

Works fine, but it has to be black and normal height on other pages then homepage. You have a fix?

[topnewyork · Accepted solution]

Hello there,

Online Store ->Theme ->Edit code

Assets ->theme.liquid

<style>
  {% if template.name == 'index' %}
    .header-wrapper {
      position: absolute !important;
      width: 100% !important;
      top: 0px !important;
      background-color: transparent !important;
      color: black !important; /* Set text color to black */
    }
  {% else %}
    .header-wrapper {
      background-color: black !important; /* Set background color to black */
      color: white !important; /* Set text color to white */
    }
  {% endif %}
</style>

 Thanks

[adfarm]

@topnewyork Is it possible to add the transparant menu bar to more pages? By example: contact page. And how to do that? 

I will build more pages with hero image, so I would like to be able to add the transparent menu bar to every page I want it to. 

[adfarm]

@topnewyork answer on this? How to apply the menu bar to more pages? 

[topnewyork]

If there is an image banner shown in the product section, enter the following code:

div#Banner-template--22014112596276__image_banner_MVnYXK {
  display: none;
}