How to extend footer menu to one line

Solved

How to extend footer menu to one line

jewellerystore1
Explorer
97 0 8

Hi there, 

 

I would like my footer menu to appear in one single horizontal line no matter the screen size on DESKTOP. 

 

Please help!

 

Website: https://nuijewellery.com.au/

 

Screen Shot 2024-06-21 at 11.25.16 am.png

Accepted Solution (1)

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi @jewellerystore1 ,

You can extend footer menu to one line by following this guide:

1. Go to your online store

2. Go to themes and edit code

3. Find theme.liquid file and add this code before </head> tag

<style>
   @media (min-width: 768px) {
      .md\:grid-cols-12:has(.menu) {
        grid-template-columns: none !important;
      }
    }
</style>

The result will look like this

BSSCommerceTA_0-1718934240095.png

Hope this will help you

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi @jewellerystore1 ,

You can extend footer menu to one line by following this guide:

1. Go to your online store

2. Go to themes and edit code

3. Find theme.liquid file and add this code before </head> tag

<style>
   @media (min-width: 768px) {
      .md\:grid-cols-12:has(.menu) {
        grid-template-columns: none !important;
      }
    }
</style>

The result will look like this

BSSCommerceTA_0-1718934240095.png

Hope this will help you

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
jewellerystore1
Explorer
97 0 8

Legend! Thanks so much that worked 🙂

BSSCommerce-TA
Shopify Partner
123 24 24

Hi @jewellerystore1,
I checked your problem and here is the solution for you. Please follow the guide below:
Step 1: Navigate to Online store => Themes => Edit code

Step 2: Find the theme.liquid file and add insert this code to your file (insert this code above tag </body> like this)

BSSCommerceTA_0-1718934602826.png

 

<script>
  const elements = document.querySelectorAll('.shopify-section-group-footer-group footer .wrapper .relative .grid');

  elements.forEach(element => {
      element.style.gridTemplateColumns = 'repeat(1, minmax(0, 1fr))';
  });
</script>

  

Hope this can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Henry
Shopify Partner
1184 335 283

Hi @jewellerystore1 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

<style>

#shopify-section-sections--22716799123742__footer .items-top {

    display: flex !important;

    justify-content: center;

}

</style>
In addition on the home page, you can add an "about us" section to create a Good First Impression, Building Trust, Improving SEO An "About Us" section containing keywords related to your business field can help improve SEO rankings, attract more traffic from search engines.

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.