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

Question

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

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

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

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

.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"> 

Тем не менее, реагирующий nav-toggle помещается под заголовком, когда экран (< 768px) изменен.

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

Answer 1

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

.logo-small{ 
    float:left; 
} 

и разместите навигационную кнопку.

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