I WANT TO MAKE MY FOOTER MENUS ALIGNED ON TOP

Solved

I WANT TO MAKE MY FOOTER MENUS ALIGNED ON TOP

TinColens
New Member
9 0 0

Hi. I want to make my Footer menus aligned on top. Can someone help me on this?

Capture.PNG

Accepted Solution (1)
Van_Nguyen_GSG
Shopify Partner
161 23 44

This is an accepted solution.

@TinColensthis should do the trick:

  1. Go to "Sales Channels" > "Themes" > [Your theme name]
  2. Click the 3 little dots before "Customize" > "Edit Code"
  3. click Layout/theme.liquid and scroll to the bottom of the file
  4. Paste the following just above the </head>

 

 

<style>
@media screen and (max-width: 767px) {
  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    align-items: flex-start !important;
  }
}
</style>

 

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!

View solution in original post

Replies 6 (6)

Van_Nguyen_GSG
Shopify Partner
161 23 44

hi @TinColens , could you share a link to the store?

Otherwise you can try:

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
TinColens
New Member
9 0 0

Hi. Here it is:

https://browsxrosi.myshopify.com/

 

I want it to be like this website in desktop and mobile view:

https://fuzionartistry.com/

Van_Nguyen_GSG
Shopify Partner
161 23 44

This is an accepted solution.

@TinColensthis should do the trick:

  1. Go to "Sales Channels" > "Themes" > [Your theme name]
  2. Click the 3 little dots before "Customize" > "Edit Code"
  3. click Layout/theme.liquid and scroll to the bottom of the file
  4. Paste the following just above the </head>

 

 

<style>
@media screen and (max-width: 767px) {
  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    align-items: flex-start !important;
  }
}
</style>

 

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
TinColens
New Member
9 0 0

Hi, again. It worked and aligned the menus on top. But, it still looks like these on desktop and mobile view:

2.PNG

 

1.PNG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Van_Nguyen_GSG
Shopify Partner
161 23 44

Give this a try:

 

<style>
@media screen and (max-width: 767px) {
  .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    align-items: flex-start !important;
  }
  .footer__blocks-wrapper {
    flex-wrap: wrap !important;
  }
  .footer__blocks-wrapper > .footer-block:not(.footer-block--menu) {
    width: 100% !important;
  }
}
</style>

 

Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
TinColens
New Member
9 0 0

Hi. What I mean was I want to add a clickable logo and details. It will look like this in desktop view:

4.png

 

and this when in mobile view:

5.jpg