Adjust sidebar toggle of learn2-theme

Hi,

I am using the RTFM Skeleton with the Learn2 theme. The theme has already integrated a toggle-sidebar, so that the menu is only visible, when a menu button is clicked. However, the window width, when the menu button appears and the sidebar toggles to be not visible, is quite small - the button appears only on smartphones. I would like to adjust this width, so that the menu button already appears on tablets, which have a rather small screen width too.

Unfortunately I cannot find the proper code line. I already found the reference to data-sidebar-toggle in line 99 of learn.js and the css for the menu button (#sidebar-toggle) in _nav.scss. But I cannot find a width, that triggers the menu button to appear and the sidebar to be unvisible as long as the button is not clicked.

Does anybody see, where to adjust the window width, that triggers the menu button?
Thanks in advance.

@elvoss, The appearance/disappearance of menu-toggle and sidebar, are governed by css using media queries.

To override the default, you could try the following:

• Create an inheriting theme. Lets name it 'mytheme'.
• Copy file /user/themes/learn2/templates/partials/base.html.twig into 'mytheme' in folder /user/themes/mytheme/templates/partials/
• In file /user/themes/mytheme/templates/partials/base.html.twig add on line 21:
  TWIGCopy

  {% do assets.addCss('theme://css/custom.css') %}
  

• Create file /user/themes/mytheme/css/custom.css and add the following to make the menu-toggle appear at <=900px:

  CSSCopy

  @media (max-width: 900px) {
    #sidebar {
        left: -230px;
    }
    #body {
        margin-left: 0px;
    }
  
    #body .padding {
        padding: 15px 1rem;
    }
  
    #sidebar-toggle {
        display: inline-block;
    }
  }
  

Note:

• Adapt width 900px to your own preference.

@pamtbaau , thank you for your fast and extensive answer!

I had to do two small changes in the css code, but now it looks nice:

@media (max-width: 1280px) {
    #sidebar {
        left: -300px; /* sidebar seems to be 300 px wide */
    }
    #body {
        margin-left: 0px;
    }
/* arrows for navigation layed over text and menu button, so I commented this out
    #body .padding {
        padding: 15px 1rem;
    }
*/
    #sidebar-toggle {
        display: inline-block;
    }
}

Unfortunately, there remains one problem: The menu-button does not work, if the width is higher than the initial "toggle-width", but lower than 1280px. If I click it, the sidebar does not come in. Do you know, how to solve this?

Thanks in advance!

@elvoss,

It seems I didn't test it thoroughly enough... Try:

@media (max-width: 1280px) {
    #sidebar {
        left: -300px; /* sidebar seems to be 300 px wide */
    }
    #body {
        margin-left: 0px;
    }
    /* arrows for navigation layed over text and menu button, 
       so I commented this out
        #body .padding {
            padding: 15px 1rem;
        }
    */
    #sidebar-toggle {
        display: inline-block;
    } 
    .sidebar-hidden #sidebar {
        left: 0;
    }

    .sidebar-hidden {
        overflow: hidden;
    }

    .sidebar-hidden #body {
        margin-left: 230px;
        overflow: hidden;
    }
}

@pamtbaau ,

thanks again for your tip! Now it works well!

There was one small problem, that is, the navigation arrow to the previous page layed over the sidebar, when it was toggled in. So I added a line, so that this arrow disappears, when the sidebar is visible.

This is, what I came up with:

@media (max-width: 1280px) {
    #sidebar {
        left: -300px; /* sidebar seems to be 300 px wide */
    }
    #body {
        margin-left: 0px;
    }
    /* arrows for navigation layed over text and menu button, 
       so I commented this out
        #body .padding {
            padding: 15px 1rem;
        }
    */
    #sidebar-toggle {
        display: inline-block;
    } 
    .sidebar-hidden #sidebar {
        left: 0;
    }

    .sidebar-hidden {
        overflow: hidden;
    }

    .sidebar-hidden #body {
        margin-left: 230px;
        overflow: hidden;
    }
   /* prevent left navigation arrow to lay over sidebar, when it is visible */
   .sidebar-hidden .nav-prev {
       display: none !important;
   }
}