Mobile First - Responsive Landing Page

Community feedback

• 

  Minh Khang Tran•510

  @MinhKhangTranPosted over 2 years ago

  Hi Dogan Saglam, nice solution.

  Your subtle animation at the nav-icon and at the gallery are great!

  I found a small "issue". I just discovered it because I played with the viewport. If you go to mobile viewport and click on the hamburger the navigation opens. This is the expected behavior. But if I change the viewport to desktop the navigation should switch to the desktop Navigation. But your solution shows a slightly distorted navigation.

  Something like this should prevent it:

  // Check if responsive menu is open when resized and then remove
    window.addEventListener("resize", () => {
      if (
        menuToggle.classList.contains("active") && navBar.classList.contains("nav-open") &&
        window.matchMedia("(min-width: 768px)").matches
      ) {
        menuToggle.classList.remove('active');
      	navBar.classList.remove('nav-open');
      }
    });
  

  This is a very small issue and normal user normally would not resize the viewport like developers.

  Keep Coding and having fun doing it 🥰

  Marked as helpful

  1

  ---

  

  Dogan Saglam•350

  @dsaglam94Posted over 2 years ago

  @MinhKhangTran wow thanks, man. I checked the issue you mentioned and you're really right I hadn't realized this misbehavior. I am gonna add the code snippet you shared to see what it does and implement it to my code.

  Thanks for your contribution! I really appreciate it.

  0
• 

  Ollie•580

  @ohermans1Posted over 2 years ago

  Nice work! Love the extra touches!

  1

  ---

  

  Dogan Saglam•350

  @dsaglam94Posted over 2 years ago

  @ohermans1 Thanks, man! I appreciate your comment.

  1