Horizontal Tabs Navigation Gradient not sticking to the side

Design help Custom code
1

Hi Everyone,

I’m having some trouble with the tabs horizontal navigation on the mobile version of my ‘Store’ Page.

I would like to have a small gradient on the right handside sticking to the edge of the screen parttially hiding the last visible tab and indicating to the user that there are more tabs in that direction. Very similar to what google search has in their horizontal tabs menu. ( see attached )

IMG_0725.PNG
IMG_0725.PNG1500×2822 187 KB

Unfortunately now the gradient is scrolling sideways together with the menu.
Any ideas how I can fix this?

Here’s a link to that page:

https://preview.webflow.com/preview/harmonyldn?utm_medium=preview_link&utm_source=designer&utm_content=harmonyldn&preview=eed5ace8d77f92579212ed8367c04ecf&pageId=627ffacc8875855998ef3f8c&workflow=preview

Any help would be much appreciated!

Thanks!
Marina

2

You can put the tabs element in a div, make this div relative positioned then add another div inside this div which will act as a gradient, position this div absolute and tweak to have it the way you want. make sure its above your tabs by changing its z value and now this gradient div will stay there as the tabs behind it get swiped.

2 Likes
3

You could do this by putting your tabs in another div block (with position set to relative) and then add another div block inside after your tabs. Set this new div block to absolute and set a small width (say 20px) and make the height the same as the tabs (~30px). Then set the background of this new small div block to a background colour gradient 90degrees (so it’s horizontal).
Set the initial colour to #e8e5db with 0 opacity and the final colour to #e8e5db 100% opacity.
You might want to play around with the right margin on your tabs so it has the illusion of disappearing when you scroll to the last tab.

Looks like Akarshan beat me to it… it sounds like a similar solution.

2 Likes
4

Hi Akarshan, thanks for your reply.

This was my initial idea too and I tried it out but because the gradient now sits on top of the Tabs menu it prevents the tabs menu from being swiped :frowning:

5

I tried this as well but when I create the 90 degree gradient and set one end to transparent and the other one to an opaque colour, what should be the transparent end of the gradient still shows up as a kind of low opacity black and I cannot firugre out how tto change it :frowning:

6

If you give it a class of tabs__gradient you can add this to the custom code (head) in page settings.

.tabs__graident {
 pointer-events: none;
}
</style>
1 Like
7

Thannk you…that did the trick! However I still can’t get rid of that weird shadow where the gradient shoulld actually be fading tto completely transparent. The value on the leftt side is #000000 yet it is still gray. Do you have any idea why that is? I’m attachiing a screenshot.

IMG_0752.PNG
IMG_0752.PNG1242×2688 80 KB