Footer: align menu to the right (dawn theme)

Store Design
, ,

Topic summary

A user seeks to align their footer menu and language selector to the right side of their Shopify Dawn theme store. Multiple developers have provided CSS solutions to add to the base.css file.

Proposed Solutions:

  • Dan-From-Ryviu suggested using float: right and text-align: right with flexbox direction adjustments
  • David_SHT recommended text-align: end and justify-content: end properties
  • INA_MSWEB offered a flexbox-based approach with align-items: end

Current Status:
The issue remains partially unresolved. The user reports that the language selector moved successfully, but the menu itself did not align to the right as intended. David_SHT indicated they would check further to troubleshoot the problem.

All solutions involve adding custom CSS code to the bottom of the base.css file through the theme editor.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi! How can I align the footer menu and language selector (red box) to the right (green box)?
website: www.10xfuel.com

10xfuel_0-1696305593089.png
10xfuel_0-1696305593089.png1716Ă—1054 48.3 KB

thank you!

2

Hi @10xfuel

Please add this code to bottom of base.css in your Online store > Themes > Edit code

ul.footer-block__details-content { float: right !imporatant; text-align: right !important; }
.footer-block__details-content>li { margin-right: 0px !important; }
.footer__content-bottom-wrapper { flex-direction: column !important; }
.footer__localization { flex-direction: row-reverse !important; }

Screenshot 2023-10-03 at 11.11.28.png
Screenshot 2023-10-03 at 11.11.28.png1213Ă—547 11.5 KB

3

Hi @10xfuel ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.footer-block__details-content {
    text-align: end !important;
}
.footer-block__details-content>li {
   margin: 0 !important;
}
.footer__content-bottom-wrapper {
    display: flex !important;
    flex-direction: column !important;
}
.footer__column.footer__localization {
  justify-content: end !important;
}

result:

David_SHT_0-1696306745707.png
David_SHT_0-1696306745707.png3150Ă—1192 101 KB

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

David | SalesHunterThemes team

1 Like
4

I entered the code but nothing happened - what did I do wrong?

10xfuel_0-1696306928380.png
10xfuel_0-1696306928380.png740Ă—482 61 KB

5

the “language selector” moved - the menu not:

10xfuel_1-1696307026773.png
10xfuel_1-1696307026773.png2304Ă—678 8.67 KB

1 Like
6

Hi @10xfuel

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.footer-block__details-content {display: flex !important; flex-direction: column !important; align-items: end !important;}

.footer__content-top {padding-bottom: 2rem !important;}

.footer__content-bottom {padding-top: 1rem !important;}

Regards,

San

7

Let me check