Как переместить html элементы с одинаковыми классами?

Не стал разбирать ваш код и набросал свой, но думаю что суть вам будет понятна. Но есть один баг: когда курсор выходит за пределы итема, тогда он останавливается. Как его пофиксить напишу позже, а пока сами подумайте

<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>

.block{
	margin: 10px;
	width: 100px;
	height: 100px;
	text-align: center;
	background-color: #447;
}

window.onmousedown = function(e) {
	if(e.target.className == 'block') {
		e.target.onmousemove = function(e) {
			e.target.style.position = "absolute";
			e.target.style.left = e.pageX-e.target.offsetWidth/2+"px";
			e.target.style.top = e.pageY-e.target.offsetHeight/2+"px";
		}
		e.target.onmouseup = function(e) {
			e.target.onmousemove = null;
		}
	}
}

Как обрезать текст?

#ямыnginx, задайте родителю position: relative а тексту position: absolute и скрывайте текс как вам хочется, например:

.a{
	height: 20px;
	overflow: hidden;
	position: relative;
}

.a h1{
	margin: 0;
	position: absolute;
	top: -80%;
}

Почему navbar при открытии отодвигает вниз страницу а не открывается поверх нее?

HTML тоже отправьте!