GENERAL CSS TIPS AND TRICKS

general.scss

// z-index only works on positioned elements (absolute, relative or fixed) :) 
// if you have statice element you have to change
// example
.navbar-header {
    position: relative;
    z-index:1;
}


// trick of shrinking a text to three dots
.threeDotsDiv {
    max-width: 82px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

// mouse hover and opening drop downs

// https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/
.submenu {
  visibility: hidden;
  transition: 0.2s 1s; /* delay of 1 seconds on hover off */
}
.parent:hover .submenu {
  visibility: visible;
  transition-delay: 0s; /* react immediately on hover */
}

// Instead of using a border, we have used the CSS3 box-shadow property to make the dropdown menu look like a "card".
// CSS card
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);