Widening content when the sidebar is hidden

HTML & CSS
1

Hi,
I now have some CSS which essentially works. It hides/shows the menu when I activate a button which in turn activates a JS script.
The problem is that I hoped it would move everything to the left once the menu was hidden. I tried setting the sidebar width to zero, but to no effect. Is this a limitation of grid?
Code is here: https://codepen.io/Gridman/pen/mdNqxPV

2

There appears to be no HTML in that Pen.

3

Sorry, here it is.

4

If you want to change the orange to full width when the sidebar is removed then you need to change the grid template areas at the same time.

Rather than adding the hidden class to the sidebar change it to be added to #body instead and then you can control the change of the grid and the display of the sidebar using the one class.

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas:
    "menubtn header "
    "sidebar content"
    "footer footer";
}
#body.hidden{
 grid-template-areas:
    "menubtn header "
    "content content"
    "footer footer";
}
.hidden #sidebar{
  display: none;
}

Remember to change the js to target #body element and to manually add the hidden class to that element if you want the sidebar hidden by default.

5

Many thanks for this. I’m indebted.

6

Yes, this certainly works, but:
I changed the code as proscribed, and remembered to remove the class=hidden from the sidebar, and on my body div, I now have:

The menu toggles perfectly, but initially displays, i.e. the class=hidden is ignored. Probably my error, but I copied the code exactly. Thanks.
7

Check you have this in place:


<div id="body" class="hidden">

Full example:

8

Despite everything, I can’t get this to work correctly.

Many thanks for your patience.

9

That pen is blank. Did you forget to save it?

10

Sorry. Using a screen reader, Codepen can be tricky.

11

You seem to have added the same js twice. You only need it once :slight_smile:

Also you missed the descendant selector (the space) in the hidden sidebar rule. It should be like this :slight_smile:


.hidden #sidebar {
  display: none;
}

Note the space after the hidden class.

12

All working now. I had spotted the errors you’d flagged, but still didn’t work, so restarted local server, and that seemed to do the trick. Many thanks.

1 Like
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.