How to make a Horizontal Footer for "Simple" Theme?

parchedpvd
New Member
1 0 0

Hi eveyrone

 

For the "Simple" theme, where in the CSS code to I go in order to change footer links to be horizontal, rather than stacked? I am referring to the bottom here with the Search, About, FAQ, etc. I would rather have the whole line of items be centered with a little space in between, which then on mobile will break into as many lines as necessary.

 

Thanks!

 

 

Screen Shot 2019-08-22 at 4.43.09 PM.png

0 Likes

Hello  ,

Add this code at the bottom of  theme- > edit code-> assets -> theme.scss.css

.site-footer .grid__item.text-left .site-footer__menu li {
	display: inline-block;
	margin: 0 3%;
}
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
nuova-idea
Tourist
20 0 3

it is not working in minimal theme, any other suggestions?

0 Likes
suyash1
Shopify Partner
2892 308 476

@nuova-idea - can you please share site link?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
nuova-idea
Tourist
20 0 3

Hi, I added 

.site-footer__links li {
  display: inline-block;
  margin-right:1em; /* add some space to the right of the link */
}

 

works fine but first link's title is in bigger fonts now 

0 Likes
nuova-idea
Tourist
20 0 3
0 Likes
suyash1
Shopify Partner
2892 308 476

@nuova-idea - right click is disabled, can not check it

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
nuova-idea
Tourist
20 0 3
You can check now
0 Likes
nuova-idea
Tourist
20 0 3

@suyash1  Hi,have you got time to check whats the font size issue?

0 Likes
suyash1
Shopify Partner
2892 308 476

@nuova-idea - are footer links added via html? I can see html tag not being closed and hence link has bigger font size than others

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes