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 · Accepted solution]

@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 </body> tag

<style>
@media only screen and (max-width: 768px) {
  #shopify-section-template--15186842910792__breadcrumb_Bqqhj6 {
    margin-top: 74px!important;
  }
}
</style>

Result:

[Emiway]

not working on product page

[BSSCommerce-B2B]

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

[Emiway]

yes i fixed that

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

1. Online Store > Themes.

2. Edit code for your active theme.

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

4. 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