Responsive Intro Section with Dropdown and Nevigation

Community feedback

• 

  Eduardo•910

  @KTrick01Posted over 2 years ago

  Hi! A quick fix for your problem is adding position: relative; to your .listlLevel1 class, thats because your dropdown menu is positioned based on the closest parent that have a position that its not static, hope that it helps!

  2
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Sandesh, first off, good job putting this together as this challenge can be a tricky one. About your question, what's happening is that, the dropdown menus have a position:absolute, but the buttons (which they should be positioned to) do not have a position: relative;, and so, what the browser does is it goes up to the parent containers to find one with position: relative, and if there are none, then it uses the body selector. You just need to add position: relative to the .listLevel1 selectors and that should make things more normal. I would also change the dropdown for features to right: 0; for the dropdown for company, I'd change the left to left: 0, and I'd also add width: fit-content as right now the width jumps a bit depending on what is hovered over.

  Hope this helps!

  2
• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, great work on this one! Addition to position issue, when the size gets wider than the breakpoint 1020px while dropdown is still open, header design breaks. That's because .nav visibility is hidden but still displays. It could be fixed by CSS style but I'll show an alternative fix to watch media-query through JS:

    const mediaQuery = window.matchMedia("(min-width: 1020px)");
  
    function checkMediaQuery(e) {
      if (e.matches)
        closeSideNav()
      else {
        showNav()
      }
    }
  
    mediaQuery.addEventListener('change', checkMediaQuery)
  

  Note that, when you change style of elements with JS, it overrides CSS so things might not go as you expect when you take that approach. You can use !important on style for CSS to still persist but now it overrides JS. So safer approach would be to add-remove CSS classes through JS functions or continue with JS for the changed styles. Great work again and happy coding :)

  0