Make the header bottom border thicker / darker and add a shadow to it (Dawn 10.0 Theme)

[bet]

In the Dawn theme customizer, in the header section, I selected "show separator line" and it added a header bottom border but the border is very light and narrow.  Is there some css I can add to make the header bottom border thicker / darker and also add shadow effects to the headers bottom border?

What css / html code changes are required to do this on the Shopify Dawn 10.0 theme at my website:

BuyExcelTemplates.com

Thank you.

[ZenoPageBuilder · Accepted solution]

Hello @bet 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header-wrapper {
    border-bottom: 2px solid #777;
    box-shadow: 0 4px 2px -2px #777;
}

The result

Hope that helps!

[ZenoPageBuilder · Accepted solution]

Hello @bet 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.header-wrapper {
    border-bottom: 2px solid #777;
    box-shadow: 0 4px 2px -2px #777;
}

The result

Hope that helps!

[bet]

@ZenoPageBuilder Thank you for your solution.

[ZenoPageBuilder]

You are welcome!

[PageFly-Henry · Accepted solution]

HI @bet 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.header-wrapper--border-bottom {

    border-bottom: 2px solid black !important;

    box-shadow: 0px 0px 32px 0px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[bet]

Hello @PageFly-Henry  Thank you for your solution. Do you know if its possible with CSS, and using your code as an example, of how to make one group of header bottom border code apply to mobile view and another group of header bottom border code apply to desktop?

For example on mobile view, I may want a bigger shadow effect and thicker solid line compared to desktop view for the header bottom border