Hover effect on menu Impulse Theme

Solved

Hover effect on menu Impulse Theme

naturalcurlsme
Tourist
30 0 1

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

Accepted Solution (1)

EBOOST
Shopify Partner
1042 278 314

This is an accepted solution.

Hi @naturalcurlsme ,


May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
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>

EBOOST_0-1718878519919.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Reply 1 (1)

EBOOST
Shopify Partner
1042 278 314

This is an accepted solution.

Hi @naturalcurlsme ,


May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
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>

EBOOST_0-1718878519919.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤