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

Thanks Tahir, that mostly worked.

I think the full width also needs to be applied to the sub navigation before it becomes sticky as there's a weird indent happening on mobile before scrolling (see grab). Not sure if some of my previous CSS is conflicting:

/* ============================================================
   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);
  }
}

  /* Tahir edit */
@media only screen and (min-width: 1px) and (max-width: 999px) {
    .page-submenu ul {
        position: absolute;
        top: 0px;
    }

    .page-submenu .full-width-content {
        width: 100% !important;
    }
}
/* ============================================================
   PAGE SUBMENU – MOBILE END
   ============================================================ */

heres a screengrab

Perfect, thanks Tahir. Now I just need to work out how to get the menu to autoscroll to the right area as the user scrolls and the menu items are off screen.... but thats on me ;)