Fooer menu first item not aligned - dawn theme

Shopify Discussion
1

My footer menu in my dawn theme will not align the first element with others, also it isn’t centered on the page (horizontally)

https://blublu.ca/password

Password is : saghoo

2 Likes
2

Hi @blublu ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result :

BSSCommerceHDL_0-1725373702106.png
BSSCommerceHDL_0-1725373702106.png1215×143 5.74 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

@blublu ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above

Result:

BSSCommerceB2B_0-1725374624528.png
BSSCommerceB2B_0-1725374624528.png1045×491 76.3 KB

4

Hi @blublu

There is a code to prevent it not aligning.

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (min-width: 750px) {
    .footer-block__details-content>:first-child .list-menu__item--link {
        padding-top: .5rem !important;
    }
}

And Save.

result:

Made4uoRibe_0-1725375409568.png

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

It isn’t working, the footer menu’s first item is still higher. Would it work if I deleted the menu item and created it anew?

1 Like
6

Works!!! Great!! Now on mobile the menu is all stacked tough instead of nicely aligned.

7

@blublu , I think it’s ok

BSSCommerceHDL_0-1725379045630.png
BSSCommerceHDL_0-1725379045630.png1424×766 130 KB

8

Now on mobile the menu is all stacked tough instead of nicely aligned. Can you help me please?

1 Like
9

Thank you!! Now on mobile the menu is all stacked tough instead of nicely aligned.

10

@blublu , if you want this on mobile

BSSCommerceB2B_0-1725461574240.png
BSSCommerceB2B_0-1725461574240.png467×926 46.3 KB

Please change the previous code like this
1 Like
11
@media screen and (min-width: 750px) { .footer-block__details-content>:first-child .list-menu__item--link { padding-top: 0.5rem!important; } } Here is what I have now and it works. But the menu is now left aligned... I tried adding this right after: ``` .footer { text-align: center; } ```

didn’t work..

1 Like
12

Hi @blublu ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1726065425235.png
BSSCommerceHDL_0-1726065425235.png1909×781 124 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

13

So here is what chatgpt helped me do and it worked!!

@media screen and (min-width: 750px) { .footer-block__details-content { display: flex; justify-content: center; /* Centers the menu horizontally */ align-items: center; /* Vertically centers the items (if needed) */ } .footer-block__details-content>:first-child .list-menu__item--link { padding-top: 0.5rem!important; } }
1 Like