custom mobile menu (Flatiron)

Hey folks,

I'm working on a new website using the Flatiron template.
I changed the menu for mobile devices to a cross with this css:

@media screen and (max-width:640px) {
#mobile-navigation #mobile-navigation-label:after, #mobile-navigation.sqs-mobile-nav-open #mobile-navigation-label:after {
    content: "+";
    font-size: 50px;  
}
  }

Now I want this cross to rotate when you open the menu so maybe someone can help me?

Best regards, Nick

Try out this Custom CSS. Just change the degrees to rotate the symbol however much you want:

@media screen and (max-width:640px) {
    #mobile-navigation #mobile-navigation-label:after, #mobile-navigation.sqs-mobile-nav-open #mobile-navigation-label:after {
        content: "+";
        font-size: 50px;
        display: inline-block;
    }
    #mobile-navigation:active #mobile-navigation-label:after, #mobile-navigation.sqs-mobile-nav-open #mobile-navigation-label:after {
        -webkit-transform: rotate(50deg);
        -moz-transform: rotate(50deg);
        -o-transform: rotate(50deg);
        -ms-transform: rotate(50deg);
        transform: rotate(50deg);
    }
}

You'll see that you need to set display to block or inline-block because psuedo elements (:after) are inline by default and won't rotate without display:block or display:inline-block.

Thank you so much!