DAWN THEME: How do i add a horizonal line above nav bar, full length across screen?

Store Design
1

Hi,

How do i add a horizonal line (full length across screen) above nav bar to seperate nav menu from logo etc. Can you offset a border from the bottom of the header, a set distance?

Kind Regards,

2

To add a horizontal line above the navigation bar in Shopify, you can modify the CSS styles of your theme. Here’s an example of how to add a line and offset it from the bottom of the header by 20px:

  1. Go to your Shopify admin and click “Online Store” and then “Themes”.
  2. Click the “Actions” button for the theme you want to edit and select “Edit Code”.
  3. In the left-hand menu, click on “Assets” and then click on the “theme.scss.liquid” file to open it.
  4. Scroll down to the bottom of the file and add the following CSS code:
.site-header {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}

This will add a 1px solid line at the bottom of the header, and add a margin of 20px below it.

  1. Save the file and refresh your website to see the changes.

You can adjust the color, thickness, and margin of the line to suit your needs.

.site-header is a CSS class selector used in Shopify themes to target the header section of the website. The class name site-header is a common naming convention used by many Shopify themes, but it may vary depending on the theme being used. So if your nav bar is not site-header you should replace it with your own class.

3

Hi @SCHOIE1981

We’re BSS Commerce - Shopify Partners & Experts providing Shopify apps and Store Development on Shopify & Shopify Plus.
We saw that you need to add a horizonal line above nav bar to seperate nav menu from logo. It’s what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.
We will check it and give you a detailed solution. We’re looking forward to working with you.