How can I modify the Turbo theme logo bar to scroll horizontally?

[robnaples]

Hi all, I'm trying to figure out how to modify the logo bar in Turbo theme to scroll horizontally on desktop and mobile. In this EXAMPLE1 the bar resizes on desktop and is scrolling on mobile. In this EXAMPLE2 the image size is locked and logos on the right will fall off if desktop screen size decreases, but on mobile it is scroll-able. Any help is appreciated.

[LitCommerce · Accepted solution]

Hi @robnaples,

Please change code:

@media only screen and (max-width: 798px) {
	#shopify-section-template--16322477523195__16609189102308e234 .logo-bar {
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}
}

[LitCommerce · Accepted solution]

Hi @robnaples,

Please add code:

.logo-bar {
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[KetanKumar]

@robnaples 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Logo Slider

[LitCommerce]

Hi @robnaples,

Please send your site and if your site is password protected, please send me the password. I will check it.

[robnaples]

HTTPS://moneyruinseverything.com

[LitCommerce]

Hi @robnaples,

Go to Assets > styles.css and paste this at the bottom of the file:

@media only screen and (max-width: 798px) {
	#shopify-section-template--16322477523195__1659042345eb5d4cea .list-collections {
		display: block !important;
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}
	#shopify-section-template--16322477523195__1659042345eb5d4cea .list-collections .column {
		display: inline-block !important;
	}
}

it will work like the 2nd example you sent.

[robnaples]

My apologies - what you saw on my website was deceiving - i had a list of collections with logo images live on the website but not the logo section. I just made live a logo section on the bottom of the home page with our logo in it. I tried to adjust the code for this section, but i can't seem to get it right. I changed the 16322477523195__1659042345eb5d4cea to  16322477523195__16609189102308e234 but this section - logo-list - doesn't have a template file to refer back to.

[LitCommerce · Accepted solution]

Hi @robnaples,

Please change code:

@media only screen and (max-width: 798px) {
	#shopify-section-template--16322477523195__16609189102308e234 .logo-bar {
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}
}

[robnaples]

Amazing. I found logo-bar in the style sheet and increased the min-width: to a higher number to keep the logos from going onto a second line. I can't seem to adjust the margin between the logos - the left and right margin seem to be overridden.

/* #Logo-list
================================================== */
.logo-bar {
  text-align: center;
  margin-bottom: 20px;
}
.logo-bar a {
  transition: ease all 0.6s;
}
.logo-bar a:hover {
  opacity: 0.6;
}

.logo-bar__item {
  display: inline-block;
  vertical-align: middle;
  max-width: 100px;
  width: 100px;
  margin-top: 20px;
}
@media only screen and (min-width: 1599px) {
  .logo-bar__item {
    margin-left: 25px;
    margin-right: 25px;
  }
}

[robnaples]

Also, there does seem to be a limit as to how many logos i can put before they go onto a 2nd row.

[robnaples]

Here's how far I've gotten - I've added the above code for the logo-bar to the style sheet - thank you @LitCommerce. I've adjusted images sizes to where i want them. 

1. Problem: on a desktop I cannot add more than 8 or 9 logos or they go onto a 2nd row, they do not scroll. 
2. Problem: on mobile (and on desktop if browser is small enough) margin settings seem to not work.

1. 

2.

Margin gone between logos

2. 

[robnaples]

@LitCommerce Any feedback you can give?

[LitCommerce]

Hi @robnaples,

Can you re-add the section? I will help you check it.

[robnaples]

HI @LitCommerce, I made it live on the bottom of the page. Thank you

[LitCommerce · Accepted solution]

Hi @robnaples,

Please add code:

.logo-bar {
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[robnaples]

@LitCommerce - one small glitch when goes to mobile - the spacing/padding between logos disappears

[LitCommerce · Accepted solution]

Hi @robnaples,

Please add code:

.logo-bar__item {
    margin-left: 5px;
    margin-right: 5px;
}

[robnaples]

@LitCommerce I am grateful for all your help.