Sublinks Dropdown on Hover in Narrative Theme

Store Design
1

Hey y’all!

My client wants the submenu to expand on hover instead of on click in the Narrative theme.

The website is here: https://grovecampus.com/

So he wants, in the hamburger menu, that the “shop” submenu expands on hover.

I think I found the correct CSS & JS sections, but I can’t figure out how to tweak the code on my own. Help would be graetly appreciated.

CSS:

.navigation__link > a,
.navigation__link.navigation__has-sublinks–collapsed > button {
transition: transform 0.25s ease-out;

&:after {
content: ‘’;
display: block;
position: relative;
bottom: rem(9);
width: 0;
margin: 0 auto;
height: 2px;
background-color: $color-body-text;
transition: all 0.25s;
}

@include media-query($medium-up) {
&:hover {
@include transform(translateY(-5px));

&:after {
@include transform(translateY(5px));
width: 100%;
}
}

&:hover:active {
@include transform(translateY(0));

&:after {
@include transform(translateY(0));
}
}

}
}

.navigation__expand-sublinks {
@include prefix(‘user-select’, ‘none’, moz ms webkit spec);
@include prefix(‘appearance’, none, webkit moz spec);
position: relative;
padding: 0 ($gutter / 2);
font-size: rem(14);
line-height: line-height(64, 18);
font-weight: $font-weight-bold;
letter-spacing: rem(2.5);
color: $color-heading-text;
background-color: transparent;
border: 0;
text-decoration: none;
text-transform: uppercase;
opacity: 1;
transition: all 0.25s ease-out;

&:after {
content: ‘’;
display: block;
position: relative;
bottom: rem(9);
width: 0;
margin: 0 auto;
height: 2px;
background-color: $color-body-text;
transition: all 0.25s;
}

JS:

// Initially disable tabbing through site navigation
utils.disableTabbingOfChildren(selectors$19.navigation);

$(selectors$19.navigationButton)
.one(‘click’, this._toggleNavigationDisplay.bind(this))
.one(‘click’, this._setSublinksMaxHeight.bind(this));

$(selectors$19.navigationExpandSublinks, this.$container).on(
‘click’,
this._toggleNavigationSublinks.bind(this)
);

2

@Helaryous

Can you please try by adding below code at the bottom in theme.min.js

$(document).ready(function(){
    $("li.navigation__has-sublinks").on("mouseleave", function () {
      $(this).addClass('navigation__has-sublinks--collapsed');
    });
    $("li.navigation__has-sublinks").on("mouseover", function () {
      $(this).removeClass('navigation__has-sublinks--collapsed');
    });
  })

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on mail | Shopify Design Changes | Custom Modifications In to Shopify Theme

3

Thank you so much!!

4

Actually, it works on desktop, but now you have to click twice on SHOP in mobile for the submenu to open. Any idea what to do now?

5

@Helaryous

You need to check the onclick event JS. Actually in mobile view when you click on the arrow it is working fine, but not on the shop button. So please check its on click event script.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on mail | Shopify Design Changes | Custom Modifications In to Shopify Theme

6

Hi,

is there a way to have it open slower? To slow down the animation?

Thanks,
Seb