Docs

[xthemer]

Hey there,

.x-accordion has a “+” icon that rotates 45 degrees to become an “x” when a collapsed accordion group is toggled.

I would like to apply that same effect to the hamburger/x-icon-bars on the mobile nav so that it does a 180-degree rotation when going from .x-btn-navbar.collapsed to .x-btn-navbar and rotates back again if the menu gets closed. How would that be done? Thanks for your help!

[Rupok]

Hey there,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[xthemer]

Hey Rupok,

Thanks for the reply. It’s sometimes hard to understand where you draw the customization line. For example, when someone asks about a scroll effect/animation for buttons, you’ll take time to provide and explain the jQuery .button-down-scroll code. Isn’t the thing I’m asking about a similar type of request? That being said, I really appreciate all the help received so far from x theme support. I actually did start a customization inquiry with themeco on a different, more complex issue a few weeks ago through a link provided by support. But I never heard a thing back.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-btn-navbar, .x-btn-navbar.collapsed {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

a.x-btn-navbar {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[xthemer]

The CSS worked like a charm, Nabeel. Thanks. And thanks for the reminder to clear the cache. Always forgetting about that.

[Joao]

Glad to hear we managed to help,

Joao

[Author]

Posts