Fooer menu first item not aligned - dawn theme

[blublu]

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

[BSSCommerce-B2B · Accepted solution]

@blublu ,

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

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

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

Result:

[Made4uo-Ribe · Accepted solution]

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:

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

[blublu · Accepted solution]

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

[BSSCommerce-HDL]

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 </head> tag:

<style>
.footer-block__details-content .list-menu__item--link {
    padding-top: 0.5rem !important;
}
</style>

Here is result :

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 😍

[blublu]

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?

[BSSCommerce-HDL]

@blublu, I think it's ok

[blublu]

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

[BSSCommerce-B2B · Accepted solution]

@blublu , if you want this on mobile

Please change the previous code like this

<style>
.footer-block__details-content .list-menu__item--link {
    padding-top: 0.5rem !important;
}
@media only screen and (max-width: 768px) {
.footer-block--menu .footer-block__details-content {
  flex-direction: column;
}
</style>

[blublu]

<style>
@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;
}

</style>

didn't work..

[BSSCommerce-HDL]

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 </head> tag:

<style>
.footer-block.grid__item.footer-block--menu ul {
    justify-content: center !important;
}
</style>

Here is result: 

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  😍

[blublu]

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

<style> @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; } } </style>

[BSSCommerce-B2B · Accepted solution]

@blublu ,

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

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

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

Result:

[blublu · Accepted solution]

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

[blublu]

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

[Made4uo-Ribe · Accepted solution]

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:

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