How To Move Footer Navigation Under Line Separator In Taste Theme?

Store Design
, , ,

Topic summary

A Shopify store owner using the Taste theme wants to reposition footer navigation elements below a separator line instead of above it.

Proposed Solutions:

  • niraj_patel provided CSS code to be added to theme.liquid before the </body> tag, targeting .footer__content-bottom with padding adjustments and border modifications
  • Made4uo-Ribe suggested either removing the separator line entirely or adding CSS to base.css, style.css, or theme.css files to set border-top: 0px and padding-top: 0rem on .footer__content-bottom

Current Status:

The issue remains unresolved. The original poster tried multiple CSS solutions but reports the navigation still appears above the separator line. niraj_patel provided progressively updated CSS snippets (adding border: unset !important in the latest attempt), but confirmation of success is pending.

Technical Details:

Solutions involve custom CSS targeting footer classes, specifically manipulating padding and border properties with !important flags to override theme defaults.

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

I want to move the footer navigation to underneath the separator line, like shown in the image below. Does anyone know how I can do this, please?

My website is cultureclubworldwide.com and the password is ccww

Screenshot 2024-06-21 at 1.43.04 PM.png
Screenshot 2024-06-21 at 1.43.04 PM.png2838Ă—1382 294 KB

1 Like
2

Hello @worldwidemotion

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.footer__content-bottom { padding-top: 1rem !important; } .footer__content-top { padding-bottom: 0rem !important; }

techlyser_web_0-1718992566763.png
techlyser_web_0-1718992566763.png1349Ă—317 9.41 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hi @worldwidemotion

Can we remove the separator line or you like to stay the line like this?

Made4uoRibe_0-1718992492947.png
Made4uoRibe_0-1718992492947.png1898Ă—434 11.7 KB

If you like to remove check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer__content-bottom {
    border-top: 0px;
    padding-top: 0rem;
}

And save.

result:

Made4uoRibe_1-1718992540960.png
Made4uoRibe_1-1718992540960.png1899Ă—427 11.1 KB

4

It’s still showing above the separator line:

Screenshot 2024-06-21 at 2.29.30 PM.png
Screenshot 2024-06-21 at 2.29.30 PM.png2788Ă—454 33.2 KB

Are we able to remove the separator line?

5

add this CSS also

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.footer__content-bottom { padding-top: 0rem !important; border-top: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

I tried this but I still see the line separator

7

@worldwidemotion

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.footer__content-bottom.scroll-trigger.animate--slide-in { border: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.