Jump to content

custom mobile menu (Flatiron)

Recommended Posts

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

Link to comment
  • Replies 2
  • Created
  • Last Reply

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.