https://maroon-flamingo-264832.hostingersite.com/test-submenu/

Im trying to change the sub menu module for mobile because the out of the ox execution isnt great with the dropdown.

Instead I want a left and right scroll and have used the below CSS:.

Im having issues with the sticky element of it and I can't seem to get rid of the weird margins that are added above and below the sub menu? Its something to do with the sticky element I believe.

Are you able to point me in the right direction for fixing. I think improving this sub menu for mobile in future releases would be awesome too.

/* ============================================================
   PAGE SUBMENU – MOBILE STRIP (test-submenu + other pages)
   ============================================================ */
@media (max-width: 999px) {

  /* A. Remove any padding/margin around the row & column */
  #page-sumenu.wpb_row,
  #page-sumenu.wpb_row .vc_column_container,
  #page-sumenu .vc_column-inner,
  #page-sumenu .page-submenu {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
  }

  /* Small breathing room BELOW the strip only */
  #page-sumenu .page-submenu {
    padding-bottom: 12px !important;
  }

  /* C. Hide the "Menu" dropdown trigger */
  .page-submenu .mobile-menu-link {
    display: none !important;
  }

  /* D. Turn the UL into a horizontal, scrollable strip */
  .page-submenu ul {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0;

    /* hide scrollbar while keeping scroll */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / old Edge */
  }
  .page-submenu ul::-webkit-scrollbar {
    display: none !important;    /* Chrome / Safari */
  }

  /* E. Each item as a pill/tab */
  .page-submenu ul li {
    flex: 0 0 auto;
    list-style: none;
  }

  .page-submenu ul li a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
  }

  .page-submenu ul li.current-menu-item a,
  .page-submenu ul li a:hover {
    background-color: rgba(12, 72, 123, 0.1);
  }
}
/* ============================================================
   PAGE SUBMENU – MOBILE END
   ============================================================ */

Hey Pat,

Thank you for the response. Ive tried adding your CSS addition and its not having any impact.

You can see from the grab attached, there is still a gap at the top of the hero section and also above the sub menu, even before scroll. I just cant work out what to do :(

https://maroon-flamingo-264832.hostingersite.com/insights/white-paper/seizing-growth-opportunities-with-sharepoint/

I thought that it might be the hide header until needed function but Ive tried disabling and enabking that and the original issues exist still. Like you highlighted, I think it is indeed somethign to do with the sticky JS