0

I am facing a problem that I couldn't fixed all day. By the night, I couldn't understand what causing the problem. Now, I know what is causing but I don't know why it is causing this problem.

Firsly, I am developing and new cms which based on materialize.css as front-end framework. As you can below links have two navs one under the other and I am using Sly Jquery Scrollbar on second nav, because it provides to scroll by touching. It works fine o desktop but not working correctly on mobile device.

The problem originate from two dropdowns in first nav. When two dropdowns in first navbar is active, sly scrolbar throwing begin or end of navbar in second nav. But when I remove one of these two dropdowns, scrolling by touching is working fine. I have 3 link below, in the first link both of dropdowns are active, in the second link only first dropdown is active and in the last link only second dropdown is active.

I hope you can help me somehowe, I spent a lot of time to solve this annoying problem but only what I could done is understanding of causing of the problem :S

Links:
First:https://adminblt.aydinbulut.com/welcome

Second: https://adminblt.aydinbulut.com/welcome2

Third: https://adminblt.aydinbulut.com/welcome

Aydın Bulut
  • 132
  • 1
  • 12

1 Answers1

0

I solved the problem somehow. Suddenly I thought, what if I use position:absolute; property for both nav. I fixed prolem by using below codes.

nav.first{
 position: absolute;
 left: 0;
 top:0;
 right:0;
}
nav.second{
 position: absolute;
 left: 0;
 top:56px;
 right:0;
}

Note: the links are not more available or changed, but the solution is absolute.

Aydın Bulut
  • 132
  • 1
  • 12