I am trying to remove the slider arrows on the “We’re not the same section” when I try to delete them it deletes the entire section. When I try to hide them on specific view points it does not hide them.
I need help please.
Here is my site Read-Only: (Webflow - WebX Studios)
You need to rename the arrow class, “btn-square-prim” would be fine.
Then add div into the btn-square-prim element and you can call it arrow-wrapper, put the arrow-icon in it, and style it like in the image. Do that for both arrows.
Then you need a little bit of custom code which you can put in the embed element. It will go like this:
@media only screen and (max-width: 600px) and (min-width: 400px) { .btn-square-prim{ display: none !important; }Max and min width in the code change with max and min width you need arrows to be hidden.
If you have more different viewpoints just copy the code again and change the max and min width.
Full code image(I did it twice in case you need if don’t just leave one media section:
If you don’t understand something I said, tell me and I will try to explain better.
It should work like that, if not tell me and I will try to work it out.
Hey Lazar, thanks for responding! I will try to use your suggestion but I can’t view the second image.
Also, I am a bit confused as to where I put the custom code. What do you mean by embed element?
An embed element is an element from the left panel like a div or heading and you can find it there or search on ctrl + e. You put one on the site and you can write custom code in it. Just make a div like a comment above. Put embed element anywhere on the page and paste this code:
<style>@media only screen and (max-width: 600px) and (min-width: 400px) { .btn-square-prim{ display: none !important; }</style>
You also need to rename the main arrow class to “btn-square-prim”. Then just change the max-width and min-width in the code from 600px and 400px to the width where you need arrows to be hidden.
I hope it will work now.
Hey Lazar,
I am still very confused, how do I find the main arrow class? Also, I need the arrows to be hidden when the width is above a tablet.
You’re almost there, just 1 or 2 missing bits;
Hey Michael,
You are an absolute legend! Thank you so much for helping with this, that explained it very well with the video. I do have another question, at the end of the slider for some reason it doesn’t loop back to the first slide until the last slide disappears from the screen. Do you know why this is and how I would fix that? I additionally also have a question with the header, I am trying to make the header turn into a solid color when you scroll, however, I am not sure how to do that and the other problem is when I make the header a solid color I am unable to see the custom cursor that I made. Any help would be greatly appreciated, thank you!
Hey glad it could help, the solution credit is all Lazar’s though, please tag his instead.
Awesome work there.
I haven’t tried either of the effects you’re attempting, however the color-changing navbar would be most easily done with Webflow Interactions. You can probably search the forums for e.g. navbar interactions, and find some good tuts.
For the slider, I think the words you want to google are e.g. “looping slider” or possibly “infinite carousel”
