How do I top align newsletter and move country selector in footer

Store Design

Topic summary

A user is attempting to customize their Dawn theme footer by:

Primary Goals:

  • Top-aligning the newsletter form to match menu link headers
  • Moving the country selector beneath the newsletter form on desktop

Current Situation:

  • User has already successfully moved the newsletter to the far right
  • Attempted CSS solutions (vertical-align, margin-top) in both Custom CSS and theme.liquid are not working
  • Shared their current code implementation using CSS Grid and flexbox

Proposed Solutions:

  • One respondent suggests two approaches: quick CSS fix (may have screen compatibility issues) or more complex code editing (reliable but time-consuming)
  • Another offers to review the store directly if URL is provided

Status: Discussion remains open with the user seeking clarification on which CSS properties to use, as their margin-top attempts have failed.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi !

How do I top align the newsletter form so it matches all the menu link headers and move the country selector to be under the newsletter form in desktop - please help.

Screen Shot 2025-03-24 at 5.51.45 PM.png
Screen Shot 2025-03-24 at 5.51.45 PM.png1564×532 29.4 KB

2

Thanks for the reply!

I’m using the Dawn theme.

I’ve tried the vertical align for the newsletter both in the Custom CSS in the editor and in theme.liquid and it doesn’t seem to move the field up.

Neither does the country selector move it under newsletter.

This is what I’ve included in the theme.liquid (+the previous codes to move the newsletter to the far right):

@media only screen and (min-width: 768px) {
.footer__content-top.page-width {
display: grid !important;
grid-template-columns: auto auto !important;
position: relative;
}
.footer-block–newsletter.scroll-trigger.animate–slide-in {
flex-direction: column !important;
}
.footer-block__newsletter:not(:only-child) {
margin-right: 0 !important;
margin-left: auto !important;
}

.footer-block__newsletter {

vertical-align: top;
}

#FooterCountryForm {

margin-top: 20px

}

3

@PYZ - You can try using css to take country under newsletter but may create some issues on few screens, but it will be done quickly, or you can edit code to take country selector under newsletter, this is time taking and complex way but it is reliable as well.

4

Hi @PYZ :blush: Ellie here from BOGOS, #1 Shopify Promotion App.

Could you share me your store URL (and password if needed)? I would check it for you :blue_heart:

5

Do you mean add it to the Custom CSS in the section?

Using what code? Margin-top? I’ve tried that and it didn’t work.