Using embedded css

Hi, I'd like to use the following great hamburger icon animator by Julien Melissas in Bootstrap, but whenever I paste the script into a css on the studio, it doesn't recognise the embedded references (i.e. references to .xxx-bar):

.navbar-toggler {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  .middle-bar {
    opacity: 0;
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;

Make sure that:

  1. All of your classes listed there are added to an element for them to be used (obvious I know, but just saying, sometimes people forget to do it)
  2. Rearrange your CSS files to be sure your custom CSS file is listed last. To do this right click over the Styles category name in the Design panel and choose the "Include order" choice on that dropdown. Then drag your CSS files in the order needed.

Post again if you still need help and we probably would need a bit more detail. If you can upload the site and give a link so people can see all of the code directly that's the best way to narrow things down.