Gradient Header Background

Store Design
, , , , , , , ,
1

I’m trying to do something similar to this image:

Captura de pantalla 2024-04-24 a las 20.36.12.png
Captura de pantalla 2024-04-24 a las 20.36.12.png1912×916 177 KB

The header background is a gradient from black to transparent (black at the top, transparent at the bottom) - “black to transparent, top down gradient”.

I would like the background to respect the natural limits of the header and not be as large as in the image.

It should be on all pages, also while scrolling down.

My theme is stiletto and my website is www.winnerofficial.com

Thanks in advance!!!

2

To achieve a gradient background for the header that respects the natural limits of the header and remains visible on all pages, including while scrolling down, you can follow these steps:

  1. Add Gradient Background:
  • Go to your Shopify Admin dashboard and navigate to the theme editor.
  • Locate the header section in the theme editor where you can customize the header’s appearance.
  • Look for the option to add custom CSS or edit the header’s background.
  • Use the following CSS code to add a gradient background from black to transparent {-The code is}
.header {
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
  1. Adjust Gradient Size:
  • By default, the gradient will cover the entire header area. To adjust the size of the gradient to respect the natural limits of the header, you can use additional CSS properties like height, padding, or margin to control the size of the header.
  • Experiment with these properties to achieve the desired size and position of the gradient within the header area.
  1. Apply to All Pages:
  • Once you’ve customized the header’s gradient background, ensure that the changes are applied to all pages of your Shopify store.
  • Check the theme editor settings to confirm that the header customization is set to apply globally across your store.
  1. Sticky Header (Optional):
  • If you want the gradient background to remain visible while scrolling down the page, you may need to enable a sticky header feature in your theme settings.
  • Look for an option to enable a sticky or fixed header, which will keep the header visible at the top of the page as users scroll down.
  1. Save Changes:
  • After making the necessary adjustments, don’t forget to save your changes in the theme editor.

By following these steps, you should be able to add a gradient background to your Shopify header that respects the natural limits of the header, remains visible on all pages, and stays fixed while scrolling down. If you encounter any difficulties or have further questions, feel free to ask!

Regards

Freddy

1 Like
3

Hello! I tried the code, it didn’t do anything.

4

Have You Tried This:

.header {
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
height: 100px; /* Adjust the height to match your header’s natural limits */
}

2 Likes
5

It worked! Thank you so much.

Just one last thing, is there any way to adjust the height (with code)? Because I want to adjust the height differently on the mobile and desktop versions, and I guess I would need a code for each one hehe

6

Yes, you can adjust the height of the header differently for mobile and desktop versions using CSS media queries. Here’s how you can do it:

/* Default header height for desktop /
.header {
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
height: 100px; / Default height for desktop */
}

/* Adjust header height for mobile devices /
@media (max-width: 767px) {
.header {
height: 60px; / Adjusted height for mobile */
}
}

In the above CSS code:

  • The default height of the header is set to 100px for desktop devices.
  • Inside the @media rule with a maximum width of 767px (typical for mobile devices), the height of the header is adjusted to 60px for mobile devices. You can adjust this value according to your preference.

By using this CSS code, you can have different header heights for mobile and desktop versions of your Shopify store. Adjust the height values as needed to achieve the desired appearance on each device type.

Don’t forget to save your changes after adding the code to the theme editor.

1 Like
7

Mr Freddy i have no coding background where do i adjust the gradient for the size according to my header. if possible could you put the code in for me im using the default header that comes with the refresh theme. i put the height to 50 and its just half of the header is black and half transparent i would like a fading effect how would i go about that