My Hrader is not working well

[Emiway]

i had added braedcrumbs here but not chowing cause its behind the header
URL: https://redpandaoutdoor.in/

Working fine On Dekstop

its happening because of this code

if i remove this code than it will look likw this!

want transparent header on home page

[BSSCommerce-B2B]

@Emiway ,

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag

Result:

[rajweb]

Hi @Emiway ,

To make the header transparent on the homepage and ensure that the breadcrumbs are visible, you can adjust the CSS code in your Shopify theme.

Follow these steps:

1. Identify the Header’s CSS: Locate the CSS rule that controls the header’s background and opacity. You might need to inspect the header element using the browser’s developer tools.

2. Modify the CSS: You can add or modify the following CSS to your theme:

/* Make the header transparent */
.header {
    background: transparent !important; /* Change '.header' to the specific class used in your theme */
    position: relative; /* Ensure it stays in the flow of the document */
    z-index: 10; /* Set a higher z-index to bring it in front of other elements */
}

/* Adjust breadcrumbs position if necessary */
.breadcrumbs {
    position: relative;
    z-index: 15; /* Ensure breadcrumbs are above the header */
}

3. Add Custom CSS:

4. Online Store > Themes.

5. Edit code for your active theme.

6. Look for theme.scss.liquid or styles.scss.liquid (or a similar file) under Assets.

7. Add the CSS code at the bottom of the file.

Test Your Changes: After saving the changes, refresh your homepage to see if the breadcrumbs are now visible above the transparent header.

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

Best Regard,

Rajat Sharma

[Emiway]

not working on product page

[BSSCommerce-B2B]

@Emiway , did you fixed that? I see it’s working now

[Emiway]

yes i fixed that