Clearfix class for HTML5Boilerplate is not being placed on a containing element

Question

The website stinsonandassociates.com uses a clearfix on its mobile nav menu (seen at small screen widths). It is not working, but I am curious as to why the clearfix class I am applying (using HTML5Boilerplate) is not at least recognizing the clearfix properties. The desktop nav menu uses the same class and it works.

This is the HTML code:

<header>
<h1>Bob Stinson</h1>
<a href="/" title="Home Page">
    <img src="img/bobstinson_signature_v2.png" 
         alt="Bob Stinson signature" width="211" height="170" /></a>
</header>  
<nav id="topNav">
    <h2>Top Navigation</h2>
    <ul class="desktop clearfix">
      <li><a href="/" title="Home Page" class="current">Home</a></li>
      <li><a href="psychology" title="Psychology" 
              id="psychologyButton">Psychology</a></li>
      <li><a href="law" title="Law" id="lawButton">Law</a></li>
      <li><a href="about" title="About">About Us</a></li>
    </ul>
</nav>    
<nav class="mobile clearfix">   
    <ul>
      <li><a href="" title="Home Page">Home</a></li>
      <li><a href="psychology" title="PsychologyPage">Psychology</a></li>
      <li><a href="law" title="Law Page">Law</a></li>
      <li><a href="about" title="Law Page">About Us</a></li>
      <li><a href="contact" title="Law Page">Contact</a></li>
      <li><a href="legal" title="Law Page">Legal</a></li>
    </ul>
</nav>

This question appears to be off-topic because it does not contain the code relevant to the question — cimmanon, Jan 15 '14 at 18:49
Could it be, that the closing bracket from `@media only screen and (min-width: 481px) {` is missing? From the HTML5 Boilerplate docs `.clearfix will ensure that [an element] always fully contains its floated children` Could you clarify / describe why the navigation inside `
...
` is not recognizing the clearfix properties? — surfmuggle, Jan 15 '14 at 19:32
That is correct; the media query was missing the closing bracket. — user1498724, Jan 15 '14 at 19:37
@user1498724: Was my answer and / or my comment usefull? Do you need any more help? — surfmuggle, Jan 19 '14 at 04:05

score 1 · Accepted Answer · answered Jan 15 '14 at 19:52

I copied your code and it seems to me that the closing bracket fixes your problem:

List items contained in nav

Above all list items are inside <nav class="mobile clearfix"> ... </nav>

@media only screen and (min-width: 481px) {
  /* Style adjustments for viewports that meet the condition */

  /* Page Layout */
  ....
  /* About Us */
  .about h2 {
     text-align: left;
  }
}  /* <--- i added this bracket */

Does this fix your problem?

Clearfix class for HTML5Boilerplate is not being placed on a containing element

1 Answers1