Solved

Menu bar position css

adfarm
New Member
24 0 0

Hi,

 

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

 

0280789B-8990-464B-B164-5A5C85C15FAA.png

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. 

 

 

 

Accepted Solution (1)
topnewyork
Trailblazer
215 25 27

This is an 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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

View solution in original post

Replies 14 (14)

topnewyork
Trailblazer
215 25 27

Hi Adfarm,

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

topnewyork_0-1706178651012.png


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!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
adfarm
New Member
24 0 0

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: 

 

C76064AB-2028-4D89-8708-77C1F65141D8.png

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

adfarm
New Member
24 0 0

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

topnewyork
Trailblazer
215 25 27

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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
adfarm
New Member
24 0 0

@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:

 

023B9872-8E22-4CEC-B006-B521C1D21BE6.png

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

 

Please tell me how to fix it

 

topnewyork
Trailblazer
215 25 27

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!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
adfarm
New Member
24 0 0

@topnewyork  

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

 

F2D5795C-D569-4BBB-A103-D49F733D0458.png

 

Please take a look. 

topnewyork
Trailblazer
215 25 27

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!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
adfarm
New Member
24 0 0

@topnewyork 

 

Now the homepage is also black: adfarm.nl

 

02FF1AA8-16FD-4D16-A0A3-3D2027CC80EC.png

 


Homepage menu has to be transparent. 

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

adfarm
New Member
24 0 0

@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
Trailblazer
215 25 27

This is an 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

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
adfarm
New Member
24 0 0

@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
New Member
24 0 0

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

topnewyork
Trailblazer
215 25 27

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

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

 

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel