Using a combination of fles and grid

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Tony. I agree with @AdrianoEscarabote in the comment above about the menu. However, about your cases, here's what I think:

  Problem number 2

  Your hamburger menu couldn't be clicked in some area. It's because the .nav__close close button is covering some area of hamburger menu. Although it has opacity: 0; it doesn't mean it's not there. It's still there, it's just transparent. And when you think you click on hamburger menu, you actually click on close menu. To solve this, along with opacity: 0;, add z-index: -1; to .nav__close as its default state. Then in your javascript code, you could toggle between z-index: -1; and z-index: 0; to make it appears on top of hamburger menu only when sidebar menu is opened.

  Problem number 1

  container is the parent element. The background of the parent element will never cover its children elements. That's why it will never "overlay" the image.

  To make it works, we could do this approach. Change this style:

  .overlay {
      background-color: rgba(0, 0, 0, .5);
  }
  

  with this style:

  overlay::before {
      content: "";
      position: absolute;
      background-color: rgba(0, 0, 0, .5);
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
  }
  

  After that, you'll need to work on how to make it overlays all over the page (now if you scroll down, you'll see it doesn't cover all). Or, disable page scrolling when the sidebar menu is shown.

  That's it. Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  tony1610•410

  @tony1610Posted almost 2 years ago

  @amalkarim Thanks, I will work on this immediately.

  0
• 

  Adriano•38,040

  @AdrianoEscarabotePosted almost 2 years ago

  Hello tony1610, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

  to solve this problem do this:

  <a href="/" class="btn main__btn">Read more</a>

  I noticed that your menu was appearing if you slide the screen to the side, to solve this in a simple way we can do this:

  .container {
      position: relative;
      overflow: hidden;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0

  ---

  

  tony1610•410

  @tony1610Posted almost 2 years ago

  @AdrianoEscarabote Thanks, I didn't see the overflow at all, but I will work on this issue. Thanks for feedback!

  1