consumerportal/css/src/header.css

mydna Custimised for you

/* Nav - Common across website, blog and portals
 - All Portals change max-width to 1024px from 1200px
 - All Portals set nav#main-menu { position: fixed }
 - Consumer Portal changes @media width to 768px from 900px) */

nav#main-menu {
	background-color: white;
	box-shadow: 0 2px 2px #006eb7;
	font-size: 1rem;
	max-height: 100%;
	position: fixed;
	width: 100%;
	z-index: 100;
}

nav#main-menu .inner {
	margin: 0 auto;
	max-width: 1024px;
	padding: 15px 20px 12px;
	position: relative;
}

nav#main-menu .logo {
	height: 30px;
	width: 144px;
}

nav#main-menu .inner > ul {
	text-transform: uppercase;
}

nav#main-menu h1,
nav#main-menu h2 {
	color: #006eb7;
	font-size: 1.5em;
	left: 174px;
	position: absolute;
	top: 24px;
}

nav#main-menu a {
	display: inline-block;
	transition: 0.1s;
}

nav#main-menu h1 a {
	border-bottom: 1px dotted;
	color: #006eb7;
	text-decoration: none;
}

nav#main-menu a:hover {
	color: #f7a824;
}

nav#main-menu h1.secure:after {
    content: "\f023";
    font-family: FontAwesome;
    margin-left: 8px;
    position: absolute;
	top: -0.1rem;
}

nav#main-menu .btn {
	background-color: #006eb7;
	border-bottom: 0;
	color: #fff;
	display: inline-block;
	margin: -0.7em 0.8em;
	padding: 0.7em 0.8em;
}

nav#main-menu .btn:hover {
	background-color: #faa634;
	color: #fff;
}

nav#main-menu .btn:before {
    content: "\f023";
    font-family: FontAwesome;
    margin-right: 8px;
}

nav#main-menu ul li:not(.dropdown) .user {
    color: #006eb7;
    display: inline-block;
    font-size: 0.8em;
    margin: 0 0 0 0.6em;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    top: 0.12em;
}

@media (min-width: 769px) {
	
	nav#main-menu ul {
		position: absolute;
		right: 1.8em;
		top: 1em;
	}

	nav#main-menu ul li {
		display: inline-block;
		position: relative;
	}

	nav#main-menu ul li a {
		border-bottom: 1px dotted;
		color: #006eb7;
		display: inline-block;
		font-size: 0.8em;
		font-weight: bold;
		margin: 0.7em 0.6em;
		text-decoration: none;
	}

	nav#main-menu ul li:last-child a {
		margin-right: 0.15em;
	}
	
	nav#main-menu ul li.dropdown span {
		background-color: #006eb7;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: bold;
		margin: -10px 0 -10px 1rem;
		max-width: 160px;
		min-width: 80px;
		white-space: nowrap;
		overflow: hidden;
		padding: 9px 25px 9px 9px;
		position: relative;
		text-overflow: ellipsis;
	}
	nav#main-menu ul li:last-child span {
		min-width: 160px;
	}	
	
	nav#main-menu ul li.dropdown i {
		color: #fff;
		cursor: pointer;
		position: absolute;
		right: 8px;
		top: 3px;
	}

	nav#main-menu li.dropdown ul {
		/*background-color: #fff;
		border: 1px solid #006eb7;
		min-width: 140px;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 1.45rem;
		transition: visibility 0s 0.1s, opacity 0.1s linear;
		-webkit-transition: visibility 0s 0.1s, opacity 0.1s linear;
		visibility: hidden;
		width: calc(100% - 1rem);*/

		background-color: #fff;
	    border: 1px solid #006eb7;
	    min-width: 120px;
	    opacity: 0;
	    position: absolute;
	    right: 0;
	    top: 1.45rem;
	    transition: visibility 0s .1s,opacity .1s linear;
	    -webkit-transition: visibility 0s .1s,opacity .1s linear;
	    visibility: hidden;
	}

	nav#main-menu li.dropdown ul li {
		display: block;
		width: 100%;
	}

	nav#main-menu li.dropdown ul li a {
		border: none;
		display: block;
		font-weight: normal;
		margin: 0;
		padding: 10px;
		white-space: nowrap;
	}

	nav#main-menu li.dropdown ul li a:hover {
		background-color: #f7a824;
		color: #fff;
	}

	nav#main-menu li.dropdown:hover ul {
		cursor: pointer;
		opacity: 1;
		visibility: visible;
		transition: opacity 0.1s linear;
		-webkit-transition: opacity 0.1s linear;
	}
	
}

@media (max-width: 768px) {
	
	.hamburger {
		color: #006eb7;
		display: inline-block;
		font-size: 2em;
		position: absolute;
		right: 0.5em;
		text-decoration: none;
		top: 0.5em;
	}
	
	.hamburger:before {
		content: "\f0c9";
		font-family: "FontAwesome";
	}
	
	.showmenu .hamburger:before {
		content: "\f00d";
	}

	a.icon:after {
		content:"HOME";
	}

	nav#main-menu {
		overflow-y: hidden;
	}
	
	nav#main-menu ul {
		display: none;
	}
	
	nav#main-menu > .inner > ul {
		margin-bottom: 0;
	}
	
	nav#main-menu ul li a {
		background-color: #006eb7;
		border-bottom: 1px solid #fff;
		color: #fff;
		display: block;
		font-size: 0.9em;
		font-weight: bold;
		margin: 0 -1.2rem;
		padding: 0.8rem 1.2rem;
		text-decoration: none;
	}

	nav#main-menu ul li a.icon {
		border-bottom:1px solid #fff!important;
	}	
		
	nav#main-menu ul li span {
		display: block;
		font-size: 0.9rem;
		margin: 0;
		padding: 0.6rem 0;
		width: 100%;
	}
	
	nav#main-menu br,
	nav#main-menu ul li i {
		display: none;
	}
	
	.showmenu nav#main-menu ul {
		background-color: #fff;
		clear: right;
		display: block;
		position: relative;
		width: 100%;
	}
	
	.showmenu nav#main-menu li {
		display: block;
		text-align: right;
	}
	
	.showmenu nav#main-menu .inner {
		border-bottom: 1px solid #006eb7;
		max-height: 100%;
	}
	
	.showmenu nav#main-menu .inner > ul {
		margin-top: 1rem;
	}
	
	nav#main-menu ul li.dropdown span {
		display: none;
	}
	
	nav#main-menu ul li a:hover {
		background-color: #faa634;
		color: #fff;
	}
	
	nav#main-menu .btn {
		border-bottom: 1px solid #fff;
		display: block;
		font-size: 0.9em;
		margin: 0 -1.2rem;
		padding: 0.8rem 1.2rem;
	}

	div.maillist {	
		padding: 0!important;
	} 
	
}

@media (max-width: 460px) {
	
	nav#main-menu .logo {
		height: 20px;
		width: 96px;
	}

	nav#main-menu h1,
	nav#main-menu h2	{
		color: #006eb7;
		font-size: 1.3rem;
		left: 125px;
		position: absolute;
		top: 1rem;
	}
	
	.hamburger {
		font-size: 1.6rem;
	}

section header h3 select {
    font-size: 1em;
    font-weight: bold;
    margin: 10px 0;
    padding: 0 10px;
    width:90%;
    clear:both;
}
section header h3 {
    font-size: .9em;
    padding:4px 0;
}	
	
}


nav#main-menu ul li a.icon {
	border-bottom:none;
}
nav#main-menu ul li a.icon i.fa-home{
	font: normal normal normal 30px/1 FontAwesome;
	text-decoration:none;
	border:none;
	vertical-align: top;
	margin-left:-20px;
	top:-4px;
	position: absolute;

}
nav#main-menu ul li span.icon-help:before{
	font-family: FontAwesome;
	content: "\f128";
	display: inline-block;
	padding-right: 8px;
}
nav#main-menu ul li span.icon-result:before{
	font-family: FontAwesome;
	content: "\f21e";
	display: inline-block;
	padding-right: 8px;

}
nav#main-menu ul li span.icon-user:before{
	font-family: FontAwesome;
	content: "\f007";
	display: inline-block;
	padding-right: 8px;
}

nav#main-menu ul.top-menu {
    top: 1.2em !important;
}