Perfecting the Grid Structure

HTML & CSS
61

In the HTML tell the nav to be hidden by giving it a class of hide - simple.

62

Or, if you want to be friendlier towards others, use JavaScript to initially hide the nav.

63

I thought we got it working and now it’s messed up.

64

It doesn’t take much to get it working.

65

From that huge issue code, change the cover height from 168px to 100% and the stripe situation is permanently fixed.

.wrape .cover::before,
.wrape .cover::after {
  ...
    /*height: 168px;*/
    height: 100%;
    ...
}

And, in the initButton function, hide the nav section.

    hide(wrapper.querySelector(".nav"));

Here’s the update. https://jsfiddle.net/r8v3m1k1/271/

66

@Ray.H You told me I could remove the overflow:hidden;

It turns out it is still needed:

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

But why is it needed still?

67

Why is it still needed?

68

That’s right, you will need it.

The .cover div hangs out of the fixed height parent without overflow:hidden in place

.wrape .cover {
  width: 266px;
  height: 174px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
1 Like
69

added: good

removed: bad:

double scroll bars
https://i.imgur.com/GFJ7kdU.png

70

Hide the nav as I instructed, and linked to in https://jsfiddle.net/r8v3m1k1/271/

There’s no reason at all why the nav should be showing when the cover is active.

71

If you click on it the links don’t show.

72

Then show them when the initial overlay is hidden. It’s not rocket science.

  function hideInitialOverlay(wrapper) {
    ...
    show(wrapper.querySelector(".nav"));
  }
73

This works

.wrape {
  overflow: hidden;
}

.wrape.inactive a {
  display: none;
}

This works:

 function hideInitialOverlay(wrapper) {
    show(wrapper.querySelector(".nav"));
  }


  function initButton(selector) {
    hide(wrapper.querySelector(".nav"));
  }

Removed:

.wrape {
  overflow: hidden;
}
1 Like
74

Look at the difference here:

overflow: hidden;

removed: overflow: hidden;

The 1st code:

75

What of it? That red area is the nav when it’s not hidden.

76

It seems like it, but that’s weird.

I wonder why that is.

It doesn’t happen with the non grid code seem here:

77

That’s because you’ve given the cover a height of 100 pixels. The nav is under the cover, so the nav section is what shows beneath the cover.

You can fix that by renaming one of the classes, so that it doesn’t hide the links, but hides the nav itself.

`/*.wrape.inactive a {*/
.wrape.inactive .nav {

Then you won’t need the overflow, or the JavaScript code to hide and show the nav.

1 Like
78

This one doesn’t need javascript.

.wrape.inactive .nav {

Got it.

1 Like
79

Yep, leverage that JavaScript-added inactive class to your advantage.

1 Like
80

I need to catalogue all these different versions now.