.clearfix:before, .clearfix:after {content: " ";display: table;} .clearfix:after {clear: both;} .clearfix {*zoom: 1;} .blogmenu nav {height: 40px;width: 100%;background: #ededed;position: relative;} .blogmenu nav ul {padding: 0;margin: 0 0;width: 100%;height: 40px;} .blogmenu nav li {display: inline;float: left;} .blogmenu nav a {display: inline-block;padding:0px 10px;text-align: center;text-decoration: none;line-height: 40px;} .blogmenu nav li a {border-right: 0px solid #576979;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .blogmenu nav li:last-child a {border-right: 0;} .blogmenu nav a:hover, nav a:active {background-color: #dedede;text-decoration: none;} .blogmenu nav a#pull {display: none;} @media screen and (max-width: 600px) { .blogmenu nav {height: auto;}  .blogmenu nav ul {width: 100%;display: block;height: auto;}  .blogmenu nav li {width: 100%;position: relative;}  .blogmenu nav li a {border-bottom: 0px solid #576979;border-right: 0px solid #576979;}  .blogmenu nav a {text-align: left;width: 100%;text-indent: 10px;} } @media only screen and (max-width : 480px) { .blogmenu nav {border-bottom: 0;} .blogmenu nav ul {display: none;height: auto;} .blogmenu nav a#pull {display: block;background-color: #ffffff;width: 100%;position: relative;} .blogmenu nav a#pull:after {content:"";background: url('nav-icon.png') no-repeat;width: 30px;height: 30px;display: inline-block;position: absolute;right: 15px;top: 10px;} } @media only screen and (max-width : 320px) { .blogmenu nav li {display: block;float: none;width: 100%;} .blogmenu nav li a {border-bottom: 0px solid #576979;} }