Hide scrollbar in Header (Content Scrolling)

[Georgich]

Hi there!

I want to remove scrollbar in header.

I got inline menu with Scrolling Content enabled. I want it to be scrollable horizontally on mobile but there is an scrollbar i don’t want to use.

I was tryin’ to use webkit-scrollbar and overflow css, but scrollbar still stays in menu then i use touch-slide.

I discover, that scrolling content have ps__rail classes, but can do nothing with this information.

Please help me to find out.

[thai]

Hi There,

Would you mind providing us with your website URL you’re working on so we can take a closer?

Can you also tell us which devices you’re testing?

Thank you.

[Georgich]

http://starfall.pro

I’m trying to recreate design from https://tinkoff.ru. There is an top menu inline scrolling withot scrollbar as you can see. I’m trying to do same thing.

I’m testing my site on Xiaomi RedMi Note Pro 4 (android/miui). Probably there is a css to disable scrollbars on android (ios too), like i have to disable click animations in mobile view with this code:

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a:focus {
  outline: none !important;
}

a:active {
  outline: none !important;
}

[rad]

Hi @Georgich,

The one in your ideal site is scrollable but for the entire page and not just the header. And that looks like a design glitch.

But, you can still hide the scrollbar by adding this CSS

    [class*="ps__rail"] {
     display: none !important;   
    }

Thanks!

[Georgich]

Thanks! Awesome! It works! Respect!

[christian]

You’re welcome.