Hover effect on menu Impulse Theme

[naturalcurlsme]

Hi

My store is naturalcurlsme.com

I want the Menu dropdown to happen on hover 

The dropdown menu is also showing background full page width but i want it to be only for text

Pls help

[EBOOST · Accepted solution]

Hi @naturalcurlsme ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Layout/theme.liquid
3. Add code below to end of file and before </body> tag ( refer screenshot)

<style>
      .site-nav .site-nav__dropdown > .page-width > .grid {
        display: flex;
        flex-flow: column;
        min-width: 300px;
      }
      #SiteHeader .site-nav--is-megamenu.site-nav__item {
          position: relative;
      }
      .site-nav .site-nav__dropdown > .page-width > .grid .grid__item {
        width: 100%;
      }
    </style>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('header .site-nav > li').mouseover(function(){
          $(this).find('details').attr('open', true)
        })
        $('header .site-nav > li').mouseout(function(){
          $(this).find('details').removeAttr('open')
        })
      })
    </script>