Gradient bar below header?

[orangeandblack5]

We currently have the CSS set up to give us a bar below our header instead of the shadow:

.d-header {
  box-shadow: none;
  border-bottom: solid var(--my_header_box_color)
}

If we wanted to make this a gradient, what would be the easiest way to accomplish that instead? We can get other things to be gradients, just not this line.

[Don]

Hello,

I think I would use mixin for this.

Here is an example:

@mixin gradient-border() {
  border-image: linear-gradient(to right, orange, black);
  border-bottom: 5px solid;
  border-image-slice: 1;
}

Then you can use it on .d-header or where you want with @include gradient-border()

.d-header {
  box-shadow: none;
  @include gradient-border();
}

[orangeandblack5]

Any idea why that might cause this to happen on mobile?

[orangeandblack5]

Using the following for mobile only worked:

    border-left: 0px solid;
    border-right: 0px solid;
    border-top: 0px solid;