How can a menu sidebar be toggled / collapsed by default in HTML / CSS / JS?

Question

I have downloaded html5up's Editorial template and I'm trying to collapse the menu sidebar when the page is first visited. As shown in the screenshot below, clicking on the blue three-bar icon toggles (collapses / expands) the sidebar menu. The sidebar is visible (expanded) when the page is first loaded, but I'd like it to be collapsed instead.

The screenshot above depicts an almost-minimal reproducible example that I made using the HTML, CSS and JS below. I realize that there are some unnecessary details like font-awesome so I apologize that this is not a full MRE.

I have naively attempted to collapse the sidebar in index.html using a simple script:

document.getElementById("sidebar").click();

However this does not work.

How can the sidebar be collapsed by default?

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Editorial by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="is-preload">
            <div id="wrapper">
                    <div id="main">
                        <div class="inner">
                                <section id="banner">
                                    <div class="content">
                                        <header>
                                            <h1>Editorial</h1>
                                            <p>A free and fully responsive site template</p>
                                        </header>
                                    </div>
                                </section>
                        </div>
                    </div>
                    <div id="sidebar">
                        <div class="inner">
                                <nav id="menu">
                                    <header class="major">
                                        <h2>Menu</h2>
                                    </header>
                                    <ul>
                                        <li><a href="index.html">Homepage</a></li>
                                        <li><a>Generic</a></li>
                                        <li><a>Elements</a></li>
                                    </ul>
                                </nav>
                        </div>
                    </div>
            </div>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/main.js"></script>
            <script>
            </script>
            <script>
                document.getElementById("sidebar").click();
            </script>
    </body>
</html>

main.css

@import url(fontawesome-all.min.css);


/* Wrapper */
#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh; }

/* Main */
#main {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  width: 100%; }
  @media screen {
    #main > .inner {
      padding: 0 5em 0.1em 5em ; }
      #main > .inner > section {
        padding: 5em 0 3em 0 ; } }



#sidebar {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  background-color: #f5f6f7;
  position: relative; }

  #sidebar .toggle {
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-indent: -15em;
    top: 0;
    width: 6em;
    z-index: 10000; }
    #sidebar .toggle:before {
      font-family: 'Font Awesome 5 Free';
      content: '\f0c9';  /*3-bar sidebar toggle icon*/
      left: 0;
      position: absolute;
      text-indent: 0;
      width: inherit; }

  @media screen {
    #sidebar {
      width: 12em; }
      #sidebar > .inner {
        padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
        width: 12em; }
      #sidebar .toggle {
        left: 12em;
        line-height: 6.25em;}
        #sidebar .toggle:before {
          font-size: 1.5rem; }
      #sidebar.inactive {
        margin-left: -13em; } }

main.js

(function($) {
    var $window = $(window),
        $head = $('head'),
        $body = $('body');

        var $sidebar = $('#sidebar'),
            $sidebar_inner = $sidebar.children('.inner');

            $('<a href="#sidebar" class="toggle">Toggle</a>')
                .appendTo($sidebar)
                .on('click', function(event) {
                        event.preventDefault();
                        event.stopPropagation();
                        $sidebar.toggleClass('inactive');
                });
})(jQuery);

Try to set the inactive class onto #sidebar so that on page load it's collapsed: <div id="sidebar" class="inactive"> — 0ro2
– 0ro2, Commented Aug 28 at 22:22

0ro2 · Accepted Answer · 2025-08-29 17:59:08Z

4

You can add the inactive class to your #sidebar element, this will make the sidebar collapsed on page load via your css.

<div id="sidebar" class="inactive">
    <!-- Sidebar content here -->
</div>

This works because in your css you define:

#sidebar.inactive {
    margin-left: -13em;
}

You can also achieve this via JavaScript. In your main.js file, on DOMContentLoaded you can run this code:

$(document).ready(function() {
    $('#sidebar').addClass('inactive');
});

edited Aug 29 at 17:59

answered Aug 28 at 22:23

0ro2

1,0402 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ToddP Aug 28 at 22:41

That works for this minimal example but doesn't work for the original html5up template. Any idea how to solve the problem for this template?

Barmar Aug 28 at 23:20

Does the template have the #sidebar.inactive CSS like the example?

ToddP Aug 28 at 23:43

Yes, the template does have #sidebar.inactive. However <div id="sidebar" class="inactive"> does not collapse the sidebar. I will try to create an MRE that replicates the issue.

Barmar Aug 28 at 23:45

Is it in all the media queries? The problem is probably related to the reactive design.

ToddP Aug 29 at 1:06

Possibly related to the reactive design, thank you for the tip. On generating a new MRE I stumbled upon the solution. In addition to the <div id="sidebar" class="inactive"> in index.html I also need to toggle the class on load in main.js using a $window.on('load', function() function with the following command inside $sidebar.toggleClass('inactive'); ; these two edits together cause it to be collapsed on load. Thank you for your help!

Collectives™ on Stack Overflow

How can a menu sidebar be toggled / collapsed by default in HTML / CSS / JS?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related