How can I make my Craft Theme footer sticky, transparent and one line?

Store Design
, , , , ,
1

I need to make the footer all one line on the same line as the copyright as well as making the footer sticky and transparent. Can anyone help? I can post the code if necessary.

Opera Snapshot_2023-06-15_211438_theearthgang.myshopify.com.png
Opera Snapshot_2023-06-15_211438_theearthgang.myshopify.com.png1854×163 3.56 KB

As a reference please refer to https://b-eautiful.com

2

Hello @Millennio ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to theme.liquid

Look for the section that contains the footer code. Typically, it will be denoted by {% section ‘footer’ %} or similar.

To make the footer appear on one line, you can use CSS to adjust the layout. Here’s an example of how you can modify the CSS code:

/* Assuming the footer container has a class name 'footer-container' */
.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* If the copyright has a separate container with class name 'copyright' */
.copyright {
  white-space: nowrap; /* Prevents text from wrapping to new lines */
}

To make the footer sticky and transparent, you’ll need to modify the CSS for the footer and apply some additional properties:

/* Assuming the footer has a class name 'site-footer' */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  z-index: 999; /* Adjust the z-index value if necessary */
}

Save and preview

Hope this can help.

Ali Reviews team.

3

Glad to help. Could you please share the link to your website?