title: Horizontal scroll navigation like facebook or instagram - css
body: <p>I am having problem with my scroll navigation. or actully i am looking for a solution to mak a <strong>horizontal scroll navigation</strong> on mobile screen like most of the apps these days.
  My menu is a mega menu is a mega menu and its working fine on both desktop and mobile.
  when i use this code to make it horizontly scrollable its not opening the <strong>mega menu</strong>.</p>
  <pre><code>    ul{ /* set's the horizontal layout for the menu */
         white-space: nowrap;
         overflow-x: auto; 
         overflow-y: hidden;
         flex-wrap: inherit !important;
         scrollbar-width: none; /* this will remove scroll-bar for mozilla based browser */
  }
      selector ul::-webkit-scrollbar { 
          /* now, let's remove the scroll-bar from the menu */
            display: none; 
          }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Ku0pJ.png" rel="nofollow noreferrer">Scrollable menu working but not mega menu</a></p>
  <p>if i remove overflow-x or y propertie then mega menu displays its content but the layout is like this.
  <a href="https://i.stack.imgur.com/GlGPp.png" rel="nofollow noreferrer">after removing overflow proprtie</a></p>
  <p><a href="https://i.stack.imgur.com/8cbXa.png" rel="nofollow noreferrer">My Mega Menu</a></p>