nav-menu flashing

[gt06]

Whenever i have refresh the page, more tab is flashing. how can i stop this flashing.

Below is the code which i have put in my code in document.ready function.

var wrapper = document.querySelector(".nav-wrapper");
var nav = priorityNav.init({
	    mainNavWrapper: ".nav-wrapper", // mainnav wrapper selector (must be direct parent from mainNav)
	    mainNav: ".nav-ul", // mainnav selector. (must be inline-block)
	    navDropdownLabel: 'More',
	    navDropdownClassName: "nav__dropdown", // class used for the dropdown.
	    navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
	    breakPoint: 1,
	});

how can i resolved this issue.

[gijsroge]

You can minimize the flashing by using overflow hidden on the menu wrapper so the item's dont overflow through the other content on your website. And you can remove the overflow hidden once the user interacts with the menu. On hover/click for example.

This is far from ideal. I could add a callback when priotity nav has been initialized but I don't have the time for that right now.

Good luck!

[gt06]

<div class="nav-wrapper priority-nav priority-nav-has-dropdown" instance="0">
	<ul class="nav-ul">
		<li class="nav-item level10 ">
			<a href="#new-arrivals" class="nav-link "><span>New Arrivals</span></a>
		</li>
		<li class="nav-item level10 ">
			<a href="#swim" class="nav-link "><span>Swim</span></a></li>
		<li class="nav-item level10 ">
			<a href="#tops" class="nav-link "><span>Tops</span></a></li>
		<li class="nav-item level10 ">
			<a href="#dresses" class="nav-link "><span>Dresses</span></a></li>
		<li class="nav-item level10 ">
			<a href="#bottoms" class="nav-link "><span>Bottoms</span></a></li>
		<li class="nav-item level10 ">
			<a href="#jackets-sweaters" class="nav-link "><span>Jackets + Sweaters</span></a></li>
		<li class="nav-item level10 ">
			<a href="#bomber-jackets" class="nav-link "><span>Bomber Jackets</span></a>
		</li>
		<li class="nav-item level10 ">
			<a href="#accessories" class="nav-link "><span>Accessories</span></a>
		</li>                 				
	</ul>
	<span class="nav__dropdown-wrapper priority-nav__wrapper" aria-haspopup="true">
		<button aria-controls="menu" type="button" class="nav__dropdown-toggle priority-nav__dropdown-toggle priority-nav-is-visible" prioritynav-count="4">More</button>
		<ul aria-hidden="true" class="nav__dropdown priority-nav__dropdown">
			<li class="nav-item level10 ">
				<a href="#hosiery" class="nav-link ">
					<span>Hosiery</span>
				</a>
			</li>
			<li class="nav-item level10 ">
				<a href="#plus-sizes" class="nav-link "><span>Plus</span></a>
			</li>
			<li class="nav-item level10 ">
				<a href="#custom" class="nav-link "><span>Custom</span></a>
			</li>
			<li class="nav-item level10 ">
				<a href="#whatshot" class="nav-link "><span>What's Hot</span></a>
			</li>
		</ul>
	</span>
</div>

Which class will have to apply overflow property. Also some category has mega menu. When i hover it, mega menu should display.

[gt06]

but I have to subcategory dropdown on parent menu which is out of more button. How can i acheive it when apply overflow: hidden.

[derpyherp]

This worked for me:

.priority-nav {overflow:hidden;}
.is-open {overflow:visible;}

Curiously, there's flashing in Edge and Chrome, but not Firefox. Maybe it handles repaints differently.

[youtube666]

i found a solution:

.wrap_nav .nav-ul li a{ animation: change-color 2s ease; } @keyframes change-color { 0% { opacity: 0; } 100% { opacity: 1; } }