How to add this skid mark to the bottom of my header block?

[outdoorarmory]

Hi everyone,

My website is: theoutdoorarmory.com

My theme is: Xtra

I'd like to add the skid mark (as per below) below my header menu.

My inspiration is this website: https://rox.com.ph/ . And its skid mark is this image below. It looks nice for a sticky menu.

Please help.

Thanks,

Outdoor Armory

[Kyle_liu]

Hi @outdoorarmory 

Is that the effect?

[outdoorarmory]

Hi @Kyle_liu , yes, that's the effect we are looking for! How did you do that, please?

[Kyle_liu]

Edit theme code,

1. find header.liquid

Add `<div id=“hdrbot”></div>` before </head> tag
Add code before {%- endstyle -%}

#hdrbot {
  content: '';
  background-image: url("https://cdn.shopify.com/s/files/1/0563/9634/9489/files/hdrbot2.png?v=1713339989");
  height: 22px;
  display: block;
  background-position: bottom;
  margin-bottom: -22px;
  background-color: transparent !important;
  position: relative;
  z-index: 9;
  width: calc(100% + var(--rpp) * 2);
  margin-left: var(--rpn);
  margin-right: var(--rpn);
}

 background-images needs to be replaced

[oscprofessional]

Hi @outdoorarmory ,

Go to Online Store > Themes > Actions > Edit Code > screen.css

Add below code at the bottom of  screen.css  file

.shopify-section-header:after {
    content: '';
    background-image: url(paste your image url);
    height: 22px;
    display: block;
    background-position: bottom;
    margin-bottom: -22px;
    background-color: transparent !important;
    margin-left: -30px;
    margin-right: -30px;
}
@media (max-width: 768px){
  .shopify-section-header:after {
      height: 93px;
  }
}

[outdoorarmory]

Hi @oscprofessional , thanks for this! Would this also work on mobile layout? Afraid that we might destroy mobile layout. Please advise.

Thanks,

Outdoor Armory

[oscprofessional]

@media (max-width: 768px){
  .shopify-section-header:after {
      height: 75px;
      margin-bottom: -75px;
  }
}

[DaisyVo]

Hi @outdoorarmory ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

div.shopify-section-group-header-group.shopify-section-header::after {
    content: "";
    background-image: url("image-link");
    height: 22px;
    display: block;
    background-position: bottom;
    margin-bottom: -20px;
    background-color: transparent !important;
    width: 120% !important;
    margin-left: -10%;
}

For the 'image-link' part, please upload the image in your store, then get the cdn link here: 

Here is the result:

Please let me know if it works!

Best,

Daisy