The div.mega-posts element is inside a menu, nav , that element, when depending on the resolution, goes inside the element ul#overflow where it is not necessary, and then remove with .remove() . So far, the problem now is to return with div.mega-posts to its original location. It only comes back when the page is refreshed. What I want is to remove this element only when it is within ul#overflow .
PS: I would not refuse a solution in DOM.
var mainNav = $( 'nav ul > li.more > ul#overflow' );
mainNav.find( 'div.mega-posts' ).remove();
window.onresize = navigationResize;
navigationResize();
function navigationResize() {
$('#nav li.more').before($('#overflow > li'));
var $navItemMore = $('#nav > li.more'),
$navItems = $('#nav > li:not(.more)'),
navItemMoreWidth = navItemWidth = $navItemMore.width(),
windowWidth = $(window).width(),
navItemMoreLeft, offset, navOverflowWidth;
$navItems.each(function() {
navItemWidth += $(this).width();
});
navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
while (navItemWidth > windowWidth) {
navItemWidth -= $navItems.last().width();
$navItems.last().prependTo('#overflow');
$navItems.splice(-1,1);
}
navItemMoreLeft = $('#nav .more').offset().left;
navOverflowWidth = $('#overflow').width();
offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
$('#overflow').css({
'left': offset
});
}body {
font-family: lato,arial;
overflow-y: scroll;
}
nav {
background: #c00;
overflow: hidden;
}
.mega-posts {
height:200px;
border:5px solid green;
background:#ddd;
}
nav ul {
margin: 0 0 2em;
}
nav ul li {
float: left;
list-style:none;
padding:0
}
nav ul li.more {
width: 3em;
text-align: center;
display: none;
}
nav ul li.more:hover ul#overflow {
opacity: 1;
visibility: visible;
}
nav ul li a,
nav ul li span {
display: block;
background: #c00;
color: #fff;
text-decoration: none;
padding: 1em;
cursor: pointer;
transition-duration: .3s;
}
nav ul li a:hover,
nav ul li span:hover {
background: #e00;
}
nav ul ul {
position: absolute;
top: auto;
left: auto;
overflow: inherit;
padding: 0;
word-wrap: break-word;
z-index: 99;
}
nav ul ul ul {
top: 0;
left: 100%;
width: 200px;
}
nav ul ul li {
float: none;
width: 200px;
position: relative;
}
nav ul ul li {
word-wrap: break-word;
}
nav ul ul,
nav ul#overflow li ul {
display: none
}
nav ul li:hover>ul,
nav ul#overflow li:hover > ul {
display: block;
}
nav #overflow {
opacity: 0;
visibility: hidden;
position: absolute;
text-align: left;
transition-duration: .3s;
}
nav #overflow li {
float: none;
}
nav #overflow li a {
background: #00c;
white-space: nowrap;
}
nav #overflow li a:hover {
background: #00e;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><ulid="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Lorem 1</a></li>
<li><a href="#d">Lorem ipsum 2</a></li>
<li><a href="#">Lorem 7</a></li>
<li class="has-children"><a href="#"><i class="sth-nav-icon fa fa-table"></i>MEGA POSTS<small class="sth-nav-badge" style="background: blue">beta</small></a>
<ul class="sub-menu">
<div class="mega-posts">
<h1>Mega Posts</h1>
</div>
<li><a href="#">Schiller</a></li>
<li><a href="#">Gogol</a></li>
<li><a href="#">Dostoievski</a></li>
<li><a href="#">Immanuel Kant</a></li>
</ul>
</li>
<li><a href="#">Lorem 10</a></li>
<li class="more">
<span>[MORE]</span>
<ul id="overflow"></ul>
</li>
</ul>
</nav>