jQuery - Resetting the height of an element not working

Question

What I am trying to do is grab the height of the dropdown menu from the off-canvas menu and set it to the UL so it covers the height from where the menu is currently sitting. So If the dropdown menu is long in height, the div it's in should expand and the border-bottom should always be visible.

If you click on Corporate a few times, then click on SME and then back to Corporate, the corporate dropdown menu is sitting on top and of the DIV and the height is not being reset. I'm quite bad when it comes to explaining stuff, so take a look at the site here: Site URL

Here is the jQuery

// SLIDE OUT MENU
  $(".menu-blue-bar button").on("click", function(e) {
    $(".menu-blue-bar").toggleClass("menu-slide");
    $(".menu-blue-bar button").toggleClass("is-active");
    $(".menu-blue-bar .fade-in-menu .row").toggleClass("in-view");
    e.preventDefault();
  });

  jQuery(
    "<li class='back-button'><i class='icon icon-carousel-left-arrow'></i></li>"
  ).insertBefore(
    ".menu-blue-bar .main-menu-links .dropdown-menu li:first-child"
  );

  jQuery("li.back-button").on("click", function() {
    jQuery(".menu-blue-bar ul.dropdown-menu").removeClass("show");
    jQuery("ul.navbar-nav").css("height", "");
    console.log("clicked back arrow");
  });

  jQuery(".menu-blue-bar .navbar-nav > li.dropdown").on("click", function() {
    if (!$(".menu-blue-bar ul.dropdown-menu").hasClass("show")) {
      $(".main-menu-links ul.navbar-nav").css({
        height:
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });
    }
  });

Screenshot: screenshot link

score 0 · Answer 1 · answered Jun 28 '19 at 20:11

You're not providing a value when you "reset" the height

jQuery("ul.navbar-nav").css("height", "");

Isn't a valid unit size in CSS.

Instead, try either setting the height to 0 or initial

jQuery("ul.navbar-nav").css("height", "initial");

Also the word height should be a string (add quote marks). This

$(".main-menu-links ul.navbar-nav").css({
        height:
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });

Should be

$(".main-menu-links ul.navbar-nav").css({
        "height":
          $(this)
            .find("ul.dropdown-menu")
            .height() + "px"
      });

There might be more but start with that.

Thanks Bryce will have a look at that over the weekend or on Monday morning. Will report back on how I get on. — mjcoder, Jun 28 '19 at 20:17
that didn't have a positive effect, will have to look into this further to see what's not working. — mjcoder, Jul 01 '19 at 10:06

jQuery - Resetting the height of an element not working

1 Answers1