please help to center footer menu horizontally CRAFT THEME

Store Design
, ,

Topic summary

A Shopify store owner seeks help centering footer menu items horizontally in the Craft theme, wanting items evenly spaced on either side of a logo.

Solutions Provided:

Multiple developers offered CSS code snippets to add to the theme’s base.css file:

  • Initial fix: Added CSS to display footer menu items in a single horizontal line using flexbox properties and justify-content settings
  • Centering adjustment: Further code provided to center the footer content using text-align: center and justify-content: center on footer block elements

Implementation:
All solutions follow the same process:

  1. Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Locate Assets → base.css
  3. Paste provided CSS at the bottom of the file

Note: Some responses contain reversed/encoded text, but the core CSS solutions focus on modifying .footer-block__details-content and related footer classes with flexbox alignment properties.

The discussion remains open with multiple alternative approaches offered.

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

Can you please help me to center the footer menu in one straight line, horizontally? I would like two menu items on left to be horixontal and in one line and the two menu items on the right to be horizontal and in one line also please.

URL: https://statementpiecegifting.com/

PASSWORD: Bailey17

2

Hi @sandraleedesign

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 css file:

@media screen and (min-width: 750px){

.footer-block__details-content {margin-bottom: 0; display: flex;}

.footer-block__details-content .list-menu__item–link {padding: 0 !important;}

.footer__blocks-wrapper .footer-block grid__item:last-child .footer-block__details-content {justify-content: end;}

}

Regards,

San

3

Thank you, that worked, but now how do i position them CENTER horizontally so that they are even spaced on either side of the LOGO? And how do i center them horizontally in the footer section?

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset->base.css and paste this at the bottom of the file:
.footer__content-top.page-width .footer-block__details-content.list-unstyled {
text-align: center;
justify-content: center;
}

ZestardTech_0-1682574522422.png
ZestardTech_0-1682574522422.png1897×371 18.6 KB

5

Hello @sandraleedesign

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.footer-block-image.center {
    justify-content: initial;
    margin-top: -20px;
}