Show main nav dropdowns on hover

[noyloza]

Hello, I would like to change the main menu to show child sections on hover, not on click. Can somebody help me make that change in the code? Thank you

[crftwrk]

You must split mobile and lg view, because on touchscreens there is no :hover

Do this, snippet goes in your child to scss/_bscore_custom.scss:

// Dropdown in mobile offcanvas-menu always open
@include media-breakpoint-down(lg) {
  #bootscore-navbar .dropdown-menu:not(.navbar .dropdown-menu.dropdown-search) {
    display: block;
  }

  #bootscore-navbar .nav-item .dropdown-menu.invisible {
    visibility: visible;
  }
}

// Dropdown open on hover lg size
@include media-breakpoint-up(lg) {
  #bootscore-navbar .nav-item .dropdown-menu {
    margin-top: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: .7s;
  }

  #bootscore-navbar .nav-item:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
}

If you want to make the dropdown-toggle parent clickable, add following snippet to your child js/custom.js inside the jQuery(function ($) {...}); wrapper:

$('#bootscore-navbar .nav-link.dropdown-toggle').click(function () {
  location.href = this.href;
});

Clear browser cache. Does this help?

[noyloza]

link: http://laurenb18.sg-host.com/

[crftwrk]

You have the main-theme enabled and not the child? I can't see jQuery snippet on your site.

[crftwrk]

child is active now

Yes, and the item is clickable? All good. Please clear your browser cache and reload page.

[neutcomp]

I am using the CDN version so the solution above is not possible for me unless I get my local version instead. Will think about it.

[crftwrk]

Simple replace mixins with media queries and it work with CDN Bootstrap too.

Change @include media-breakpoint-down(lg) { to @media (max-width: 991px) { and @include media-breakpoint-up(lg) { to @media (min-width: 992px) {. This is for navbar-expand-lg, change breakpoints to yours.