How to add a horizontal line between logo and navigation menu in Dawn theme in the header

rere14
Tourist
10 0 2

I need help adding a horizontal line in the header between my logo and navigation menu in the Dawn theme

Replies 15 (15)

suyash1
Shopify Partner
9078 1129 1479

@rere14 - can you share your website link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rere14
Tourist
10 0 2
suyash1
Shopify Partner
9078 1129 1479

@rere14 - like this?

 

suyash1_0-1686370789761.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rere14
Tourist
10 0 2

yes but i would like it to be full width 

suyash1
Shopify Partner
9078 1129 1479

@rere14 - full width is difficult as the header grid structure do not have any element on left and right side of the menu to add border to it

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rere14
Tourist
10 0 2

Okay, can you provide the code to what you had before?

Moeed
Shopify Partner
3621 916 1141

Hey @rere14 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

 

<style>
nav.header__inline-menu {
    border-top: solid 1px black;
}
</style>

 

Moeed_0-1686372295877.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
rere14
Tourist
10 0 2

Thank you! how would i be able to make it full width?

Moeed
Shopify Partner
3621 916 1141

Hey @rere14 

Remove the previous code and add the new code 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
nav.header__inline-menu {
    border-top: solid 1px black;
}
.header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
    width: 100%;
    text-align: -webkit-center;
}
</style>

Moeed_0-1686373104753.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
rere14
Tourist
10 0 2

Thank you so much!

Moeed
Shopify Partner
3621 916 1141

I'm glad my solution worked for you! 🙂

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
suyash1
Shopify Partner
9078 1129 1479

@rere14 @Moeed 

 

this approach may create issues of spacing on some screens like this

 

suyash1_0-1686373170283.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
rere14
Tourist
10 0 2

i fixed it. thanks for pointing that out

 

EliskaM
Explorer
75 1 8

Awsome! This really helped me. Thank you very much ❤️

Moeed
Shopify Partner
3621 916 1141

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️