/* VARIABLES
--------------------------------------------*/@header-top-height: 40px; /* height of the top section of the header */@header-main-height: 100px; /* default height of the main section of the header */@header-sticky-height: 60px; /* height of the header when it's sticky */
/* GLOBAL DEFAULTS
--------------------------------------------*/body {
padding: 0;
margin: 0;
font-family: Arial;
}
a {
transition: color 0.3s;
}
/* GENERAL CLASSES
------------------------------------------*/ul.reset {
margin: 0;
padding: 0;
> li {
list-style: none;
}
}
/* HEADER SECTION
--------------------------------------------*/#header {
position:absolute;
top:0;
width:100%;
.header-top {
height: @header-top-height;
line-height: @header-top-height;
background: #1b2327;
color: #b0bec5;
.social-icons {
float: right;
ul {
li {
float: left;
margin-left: 5px;
font-size: 20px;
a {
color: inherit;
text-decoration: none;
display: inline-block;
width: 40px;
text-align: center;
line-height: 40px;
&:hover {
color: #fff;
}
}
}
}
}
}
.header-main {
height: @header-main-height;
line-height: @header-main-height;
background: #263238;
padding: 0 20px;
box-sizing: border-box;
/* animate the transition between normal header and sticky header */ transition: height .3s, line-height .3s;
.nav {
float: left;
ul {
li {
float: left;
a {
color: #cfd8dc;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
padding: 0 10px;
&.current {
color: #80cbc4;
}
&:hover {
color: #fff;
}
}
}
}
}
}
}
/* BODY SECTION
--------------------------------------------*/#body {
padding-top: @header-top-height + @header-main-height;
padding-left: 15px;
padding-right: 15px;
background: #eee;
transition: padding-top .3s;
}
/* FOOTER SECTION
--------------------------------------------*/#footer {
background: #1b2327;
padding: 20px;
text-align: center;
a {
color: #b0bec5;
text-decoration: none;
&:hover {
color: #fff;
}
}
}
/* STICKY HEADER STYLES
--------------------------------------------*/body.sticky-header {
#header {
.header-main {
height: @header-sticky-height;
line-height: @header-sticky-height;
position: fixed;
top:0;
width: 100%;
}
}
#body {
padding-top: @header-top-height + @header-sticky-height;
}
}
Related