Changing footer - debut theme

Solved
Sirrah
Excursionist
53 0 5

Hi,

 

I am using the Debut theme and I want to change the footer so instead of columns I can list the menu items across the page (like the header menu).  At the moment listing them downwards is making the footer huge, especially in mobile view.

 

The site is www.ellennyswim.com.

 

Thanks!

0 Likes

This is an accepted solution.

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
.site-footer__linklist-item {
    padding: 5px 0 !important ;
}
.site-footer__item {
    margin-bottom: 0px!important;
}
}

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Sirrah
Excursionist
53 0 5

Hi,

 

Thanks for your reply.  That didn't work unfortunately.

0 Likes

This will work for mobile view.
As i can see after adding this css it will look like this in mobile view:

126.jpg

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Sirrah
Excursionist
53 0 5

Ah I see.  That's definitely better thank you.  Is there a way to do the same on desktop view to remove all the extra space?  Thank you for your help!current footer.JPG

 

 

 

0 Likes

Which space you want to remove on desktop can you share screenshot?

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Sirrah
Excursionist
53 0 5

Hi again, 

 

I've attached a screenshot - bit rough, but basically the top and bottom bits marked here with black squares.current footer.JPG

0 Likes

This is an accepted solution.

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (min-device-width: 480px){
.site-footer {
    padding: 0px 55px 0 !important;
}
.site-footer__content {
    height: 160px!important;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Sirrah
Excursionist
53 0 5

Oh that's fantastic!  Thank you so much.

 

May I ask another question?  Do you know how to make the social icons in the footer white?

0 Likes

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

a.social-icons__link {
    color: white;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87