CodePen

HTML

            
              <header>
  <h1 class="mobile-logo">Company</h1>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><h1 class="logo">Company</h1></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
</header>



  
            
          
!

CSS

            
              /*-----------------------------------

Hide "mobile-logo" until 
the Media Query is called 

-----------------------------------*/
.mobile-logo {display: none;}



li, .logo {display: inline-block;}

.logo {
  width: 256px;
  height: 256px;
  background: url('http://png-1.findicons.com/files/icons/1579/devine/256/circle.png');
  vertical-align: middle;
  text-indent: -9999px;
}



@media screen and (max-width: 320px) {
  .logo {display: none;}
  .mobile-logo {display: block;}
  li {display: inline;}
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //http://css-tricks.com/forums/discussion/22585/split-nav-and-responsive-breakdown
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................