URL Shortening app

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Greetings, Dušan! 👋

  It's great to see you completing so many challenges! 😃 Nice job on this one! 👏

  I think your solution looks pretty good and responds well. The only thing I noticed that I think you should look into is that certain styles from the mobile navigation appear in the desktop navigation when it is clicked in the desktop layout. I suggest disabling the mobile navigation in the desktop layout entirely to prevent this from happening. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Dusan•700

  @DEmanderbagPosted almost 4 years ago

  Hey, @ApplePieGiraffe!

  I might be missing something but can you let me know how should I do this? Only load JS for mobile navigation when it's a small screen using @media?

  I know that styles are getting activated but I don't think it's creating an issue or at least I didn't notice any 😀

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @DEmanderbag

  On my screen, the mobile navigation links appear in a column layout and create some extra space near the top of the screen when I click on the desktop navigation (but the "x" button isn't present, meaning the mobile menu can't be closed).

  If you reused the same markup and simply applied different styles to the navigation for the mobile and desktop layouts, you can simply use a media query to make sure that the mobile styles only apply to the mobile navigation (and vice versa).

  If you're using JS to inject markup into the DOM for the mobile navigation (which might be the case), then you can detect the width of the screen (with something like screen.width, I think) and then use a conditional expression to load the markup for the mobile navigation based on the width of the viewport.

  You might not have to all of that, however. The mobile navigation seems to appear when the navigation links in the desktop layout are clicked, so perhaps only adding an event listener to the hamburger menu (and not the entire navigation or something) might do the trick!

  BTW, I like the way the navigation links fade in one-by-one in the mobile navigation! 😀

  Good luck and have fun! 👍

  1

  

  Dusan•700

  @DEmanderbagPosted almost 4 years ago

  @ApplePieGiraffe Thank you for the detailed explanation,

  I will take this feedback and update my website. I think that I understand now what is causing this issue.

  Thank you again and happy coding 👍 😄

  1