Dawn Theme Footer menu alignment issue

Store Design
,

Topic summary

A user encountered a footer menu alignment issue in the Dawn theme where the last menu item appears misaligned and breaks to a new line (see attached screenshot).

Problem: The final page link in the footer menu is not aligning properly with other menu items.

Attempted Solutions: The user tried adding custom CSS to the base.css file without success.

Proposed Fixes: Two community members offered CSS solutions:

  1. Option 1: Add margin-right to the last list item in base.css:
.footer-block__details-content li:last-child {
  margin-right: 1.5rem;
}
  1. Option 2: Add responsive CSS through Theme Settings → Custom CSS:
@media screen and (min-width: 750px) {
  footer .footer-block__details-content li {
    margin-right: 1.5rem !important;
  }
}

The second solution includes a screenshot showing the corrected alignment. Both approaches add right margin spacing to footer menu items to prevent wrapping.

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

Hi guys.
I tried to set up a menu in my footer section but the last page seems to be aligned out of the menu as you can see in the picture -

segevpeleg_1-1743361901511.png
segevpeleg_1-1743361901511.png1016Ă—1096 9.98 KB

Tried to fix it using custom CSS and adding some code to base.css page without success.
Any clues?
Thank you!

2 Likes
2

Hi @segevpeleg . Welcome to the Shopify community!

Could you share the website URL? It would be much easier to debug and solve this. If it’s password-protected, a password would be needed too.

3

Hi @CafeDelMar , website URL: smilekit.co.il , Password: 123123
Thanks :slightly_smiling_face:

1 Like
4

Hi, in your base.css replace the code you added with this:

.footer-block__details-content li:last-child {
  margin-right: 1.5rem;
}
5

@segevpeleg , here’s how to achieve that:

  1. Navigate to Sales Channels → Online Store → “Customize” button → Theme settings (Gear icon on the left sidebar) → Custom CSS
  2. Add the following code:
@media screen and (min-width: 750px) {
	footer .footer-block__details-content li {
		margin-right: 1.5rem !important;
	}
}
  1. Save (right top corner)
  2. Hard refresh the storefront

If done correctly, the result should be like this:

Screenshot_2.png
Screenshot_2.png578Ă—454 3.12 KB

1 Like