Make CoursePress menu scrollable

The theme on the site is CoursePress. The main menu in mobile views is a "hamburger" menu but could it be made a "scrollable" menu instead, as described in this article https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu, please?

  • Kasia Swiderska

    Hello Vincent,

    Please try this CSS:

    @media screen and (max-width: 790px) {
    .main-navigation a.nav-toggle {display: none;}
    
    }
    
    @media screen and (max-width: 790px) {
    .main-navigation ul {
        display: block;
    }
    .main-navigation {float: none;
     display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    clear: both;
    }
    
    #menu-top-menu {
        display: flex;
        flex-wrap: nowrap;
    }
    
    #site-navigation .menu-top-menu-container:first-child {display: none;}
    
    #site-navigation {width: 100%;}
    
    .menu-item {
      flex: 0 0 auto; }
    
    .main-navigation .menu-item-cp-courses,
    .main-navigation .menu-item-cp-dashboard,
    .main-navigation .menu-item-cp-logout {    background-position: left top;}
    
    }

    You can add this to Appearance -> Customizer -> Additional CSS.
    Or you can use it in style.css if you have a child theme. Or use this small plugin
    https://pl.wordpress.org/plugins/simple-custom-css/

    Let me know how this works for you.

    kind regards,
    Kasia

  • Kasia Swiderska

    Hello Vincent,

    Instead of previous code please try this one:

    @media screen and (max-width: 790px) {
    .main-navigation a.nav-toggle {display: none;}
    
    }
    
    @media screen and (max-width: 790px) {
    .main-navigation ul {
        display: block;
    }
    .main-navigation {
     display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    #menu-top-menu {
        display: flex;
        flex-wrap: nowrap;
    }
    
    #site-navigation .menu-top-menu-container:first-child {display: none;}
    
    #site-navigation {width: 72%; margin-top: 20px;}
    
    .menu-item {
      flex: 0 0 auto; }
    
    .main-navigation .menu-item-cp-courses,
    .main-navigation .menu-item-cp-dashboard,
    .main-navigation .menu-item-cp-logout {    background-position: left top;}
    
    }

    It should give effect like that:

    Only navigation will be moving.

    kind regards,
    Kasia