How can I expand my image banner to include the header in the Spotlight theme?

Hello all you wonderful people.

I’ve been looking for a way to expand my image banner to also include the header for my page. I haven’t found a solution to do this on the Spotlight theme. I’d be so grateful for your help on this! What I’m looking for is for the image at the top of the page to be in the header as well. Thanks!

Page url is: https://kokaio.se/
Theme: Spotlight

Hey @kokaio

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

1 Like

To expand your image banner to include the header on the Spotlight theme, you’ll need to modify the theme’s HTML and CSS code. Here’s a general approach you can follow:

  1. Identify the HTML element that represents the image banner in the theme. Look for a section or div element that contains the image.

  2. Find the HTML element that represents the header. This is usually a <header> element or a section with a class like site-header.

  3. Adjust the HTML structure to include the image within the header element. You can move the image code or add a new image element inside the header element.

  4. Once the HTML structure is updated, you’ll need to adjust the CSS to ensure the image and header display correctly together. You may need to adjust the positioning, dimensions, and other styling properties.

  5. Open the theme’s CSS file and locate the CSS rules that target the image banner and the header. You’ll need to modify these rules to accommodate the expanded layout. This may involve adjusting the positioning, dimensions, and margins.

Hello! Thanks for your reply.

Is this correct? Added a picture. It doesnt show any difference on my website so it’s still not working unfortunately.

The tag needs to be in a new line, also the image link needs to be in inverted commas (LINK)

1 Like

Hello again!

I still have trouble getting this to work. Sorry for the late reply, I really appreciate your help on this. Is this correct?