Search code examples
htmlcsscss-floatclearfix

CSS clearfix not working, why?

I am creating a webpage with a responsive nav. I think I am almost there, except from a very confusing clearfix issue..

I tried to replicate the error in jsfiddle, but was unfortunately not able to. That is why I uploaded the whole webpage to this link.

The problem is that when the page is re-sized, the responsive nav-toggle is placed beneath the header, instead of on top of the header. This is due to the floating property = right in the nav-toggle class.

I have been trying to add a 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;  
}

to the parent div like this:

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

and also like this:

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

Still, the responsive nav-toggle is placed beneath the header when the screen (<768px) is re-sized.

Can anybody tell me how to solve this, small, but annoying problem?

Solution

  • The problem is divs generally cover entire row so automatically the next element follows below them. To achieve what you want simply add

    .logo-small{
   float:left;
}

    and position your nav-toggle.

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