CFS header IPS

CFS header IPS

by web-nfo.com

HTML

<link rel="stylesheet" href="https://cs.photoprintit.com/web/85028035/assets/85028035/css/benelux_cfs_ironman.css">
<div class="cfs-header">

  <div class="cfs-header-container">
    <div class="cfs-header-top">
    
      <div class="cfs-header-icons">
        <ul>
        <li class="cfs-header-icon-account">
          <a href="https://as.photoprintit.com/web/85028035/myAccount.do" class="menu-item-link"><i class="material-icons icon"></i><span class="menu-item-text">account</span></a>
        </li>

        <li class="cfs-header-icon-service">
          <a href="http://www.cewe-fotoservice.nl/klantenservice.html" class="menu-item-link"><i class="material-icons icon"></i><span class="menu-item-text">Service</span></a>
        </li>

        <li class="cfs-header-icon-cart">
          <a href="https://as.photoprintit.com/web/85028035/orderwizardStartOrder.do" class="menu-item-link"><i class="material-icons icon"></i> <span class="menu-item-text">Mandje</span> <span class="count" id="cw_header_box_cart_quantity">0</span></a>
        </li>
        </ul>
      </div>

       <div class="cfs-header-logo">
        <a href="#">
          <img alt="cewe-fotoservice.nl" src="https://cs.photoprintit.com/web/85028035/assets/85028035/logo-cfs.png" />
        </a>
      </div>
      
    </div>
    </div>
    
  <div class="cfs-header-nav">
    <div class="cfs-header-container">
      <ul>
        <li class="cfs-header-home">
          <a href="http://www.cewe-fotoservice.nl/" title="Start" class="cewe-navigation-event" data-naviclickevent="MainNavi#Start#index">Start</a>
        </li>
        <li>
          <a rel="" href="http://www.cewe-fotoservice.nl/cewe-fotoboeken.html" title="Fotoboeken" class="cewe-navigation-event" data-naviclickevent="MainNavi#Fotoboeken#index">Fotoboeken</a>
        </li>
        <li>
          <a rel="" href="http://www.cewe-fotoservice.nl/foto.html" title="Foto" class="cewe-navigation-event" data-naviclickevent="MainNavi#Foto#index">Foto</a>
...

CSS

/* CFS Header */
.cfs-header, .cfs-header * {
  box-sizing: border-box; 
}
.cfs-header {
  font-family: arial,verdana,sans-serif;
}
.cfs-header-container {
  max-width: 1000px;
  margin: 0px auto;
}

/* Top left logo */
.cfs-header-top .cfs-header-logo {
  display:table;
  width: auto;
  height: 94px;
}
.cfs-header-top .cfs-header-logo a {
  display: table-cell;
  vertical-align: middle;
}


/* Top right icons */
.cfs-header-icons {
  float: right;
}
.cfs-header-icons ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
}
.cfs-header-icons ul li {
  display: inline-block;
}
.cfs-header-icons ul li:hover {
  background: #f0f0f0;
}
.cfs-header-icons ul li a {
  color: #666;
  text-decoration: none;
  padding: 20px 18px;
  text-transform: uppercase;
  font-size: 12px;
  display: block;
}
.cfs-header-icons ul li .icon {
  display: block;
  font-size: 35px;
  margin-bottom:5px;
}
.cfs-header-icons ul li:hover a {
  color: #e10019;
}
.cfs-header-icons .cfs-header-icon-cart {
  position: relative;
}
.cfs-header-icons .cfs-header-icon-cart .count {
    position: absolute;
    border-radius: 100%;
    background: #e10019;
    width: 1.75em;
    height: 1.75em;
    top: 2em;
    right: 2em;
    line-height: 1.9em;
    color: #fff;
    font-size: 0.8em;
}

/* Navigation bar */
.cfs-header-nav {
    background: #FFF;
    border-top: 1px solid #cfcfcf;
    border-bottom: 2px solid #e10019;
    margin: 0;
    padding: 0;
    clear: both;
}

.cfs-header-nav ul {
  display: table;
  width: 100%;
  border-left: 1px solid #cfcfcf;
  padding-left: 0px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.cfs-header-nav ul li {
    display: table-cell;
    border-right: 1px solid #cfcfcf;
    text-align: center;
    height: 35px;
    vertical-align: middle;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    -ms-transition: background-color 0.2s ease;
    -o-transition: background-color 0.2s ease;
   ...