CSS clearfix не работает, почему?

Question

Я создаю веб-страницу с отзывчивой навигацией. Я думаю, что я почти там, за исключением очень запутанной проблемы с исправлениями..

Я пытался повторить ошибку в jsfiddle, но, к сожалению, не смог. Вот почему я загрузил всю веб-страницу по этой ссылке.

Проблема в том, что при изменении размера страницы отзывчивый переключатель nav помещается под заголовком, а не поверх заголовка. Это связано с плавающим свойством = right в классе nav-toggle.

Я пытался добавить ясность:

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

для родительского div, как это:

<div class="row head clearfix"> <!-- Start Row -->

а также вот так:

<nav class="nav-collapse clearfix"> 
  <ul class="clearfix">

Тем не менее, отзывчивый навигационный переключатель помещается под заголовком, когда размер экрана (<768 пикселей) изменяется.

Кто-нибудь может сказать мне, как решить эту маленькую, но раздражающую проблему?

Answer 1

Проблема в том, что элементы div обычно покрывают всю строку, поэтому следующий элемент автоматически следует за ними. Чтобы достичь того, что вы хотите, просто добавьте

.logo-small{
   float:left;
}

и поместите ваш навигационный переключатель.

.nav-toggle {
  float: right;
  margin-top: 50px;
}