-1

When in the responsive/mobile view of www.rohiniartstudio.com When I click on the menu, the menu flickers on collapsing and displays the content below the menu. On default it was taking about 1-2s before it shows the menu items then added this code:

.collapsing 
{
  -webkit-transition: none;
    transition: none;
    display: none;
}

Can someone help me out with the flickering issue? Please visit the site and let me know?

Akshat Bhardwaj
  • 1
  • Welcome to Stack Overflow. Please review [How do I ask a good question](https://stackoverflow.com/help/how-to-ask) to see what you need to give us in your question. You are expected to have made a good attempt to fix the problem and your question should include what you have tried to solve and *all* of your relevant code (and *only* the relevant code) in a [**minimal**, **reproducible** example](https://stackoverflow.com/help/minimal-reproducible-example), so we can help. – FluffyKitten Jul 24 '20 at 17:58

2 Answers2

0

Try removing the # value from the data-target property

Set as data-target="site-navigation".

subbu swaroop
  • 11
  • 1
  • 5
0

You can't use display property when you want to make an animation with transition. The element and all the positions should be countable by CSS. Refer: https://stackoverflow.com/a/38772750/9218664

If you want to make an animation on the mobile accordion menu you should use max-height property without display.

You can see how it happens here; https://codepen.io/volcanioo/pen/LYGaJdV

M. Volkan
  • 19
  • 5