Hi All,
I’m looking to move the email address and phone number to just below the logo in my header in the Dawn theme. I’d like for it all to be in one line.
Website is: www.rideequistyle.com
TIA!
Topic summary
A user seeks help repositioning their email address and phone number directly beneath the logo in their Shopify Dawn theme header, wanting all elements aligned on one line.
Proposed Solution:
Another user provides a detailed 4-step guide involving HTML and CSS modifications:
- Remove phone/email divs from the right-aligned section
- Create a new container div (class “container__email-phone”) within the logo wrapper
- Replace phone/email divs with inline span elements
- Apply margin-top styling to the new container
A video tutorial and screenshot demonstrating the expected result are included.
Current Status:
The original poster reports being unable to implement the solution successfully, indicating the issue remains unresolved. No follow-up troubleshooting has been provided yet.
Hello CatWinter,
We will need to make some small changes to the HTML and CSS. Follow the steps below, as demonstrated in the video.
pic result:
Step 1:
First, access the div with the class “text-align:right”. Inside this div, remove the divs containing the phone number and email.
Step 2:
Now, access the div with the class “header__heading-logo-wrapper”, which contains the logo. Create a new div with a class (I named it according to your preferences) and place the divs of the phone number and email inside this new div that we just created, right after the closing tag of the “header__heading-logo-wrapper” div.
Step 3:
Replace the phone number and email divs with spans, to make them inline elements.
Step 4:
Next, apply the “margin-top: 1em” declaration to the div we created with the class “container__email-phone”
video:
https://youtu.be/ZygzVzxxrWg
I hope this solution has helped you!
Best regards,
Victor Silvestre
Thank you! Unfortunately, I cannot get this to work properly. 