如果将鼠标悬停在导航栏中的字词上，您可以看到它们会进行一些转换。现在，为了实现这种悬停效果，您不需要将光标直接放在单词上，您可以将光标放在单词的下方或上方，它仍然会激活过渡。
现在问题是，要转到另一个页面，您必须直接单击该单词。即使我的鼠标略高于/低于单词，我希望能够点击链接。
HTML
body {
background-image:url('../images/geometry2.jpg');
}
.homeBody {
display:none;
}
header {
padding:0 !important;
margin:0 !important;
font-family:"Raleway", sans-serif !important;
}
header nav a {
color:#fff !important;
font-family:"Raleway", sans-serif !important;
}
.navbar-nav > li {
color:#fff !important;
font-family:"Raleway", sans-serif !important;
}
header nav li:hover a, header nav li.active a {
color:#ecf0f1 !important;
}
header nav li:hover, header nav li.active {
color:#ecf0f1 !important;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#fff;
}
.navbar-default .navbar-toggle {
border-color:#fff;
}
.linkContain {
position:absolute;
}
@media screen and (max-width: 767px) {
.navbar-nav > li, .menu-small header .navbar-nav > li, .touch header .navbar-nav > li {
background:#0e6957;
}
}
.title {
width:100%;
margin-top:120px;
text-align:center;
font-family:'Lato', sans-serif, serif;
font-size:50px;
color:#2d2d2d;
}
.images-3 {
margin-top:30px;
}
.incenseTypes {
width:80%;
margin:40px auto 0 auto;
}
.smolder {
width:80%;
margin:40px auto 0 auto;
}
.smolder img {
width:100%;
}
.view-button {
width:100%;
height:50px;
line-height:50px;
background:#16a085;
color:#fff;
font-size:24px;
}
.view-button:hover {
background:#0e6957;
}
.aboutSection {
width:80%;
margin:auto;
}
.infoTitle {
font-family:'Lato', sans-serif, serif;
}
.infoTitle2 {
font-size:35px;
font-family:'Lato', sans-serif, serif;
}
.infoBullets {
font-size:18px;
}
.infoIntro {
font-size:18px;
}
.infoLink {
color:#3aa5d2;
}
footer {
height:100px;
background:#148d75;
color:#fff;
font-size:23px;
}
footer a {
color:#fff;
}
footer a:hover {
text-decoration:none;
color:#4cbceb;
}
.copyrightRow {
margin-top:15px;
}
ul.social-buttons {
margin-top: -10px;
margin-bottom: 0;
}
.social-buttons {
text-align:center;
}
.fa-facebook {
width:50px;
height:50px;
display:block;
background-image:url('../images/home/icons/facebook.svg');
background-repeat:no-repeat;
transition:all 0.4s;
}
.fa-facebook:hover {
background-image:url('../images/home/icons/facebookHover.svg');
}
.fa-twitter {
width:50px;
height:50px;
display:block;
background-image:url('../images/home/icons/twitter.svg');
background-repeat:no-repeat;
transition:all 0.4s;
}
.fa-twitter:hover {
background-image:url('../images/home/icons/twitterHover.svg');
}
.topScentsTitle {
width:80%;
margin:auto;
text-align:center;
font-size:35px;
color:#2d2d2d;
}
.topScents {
width:80%;
margin:20px auto 0 auto;
}
.buyNow {
width:80%;
margin:auto;
height:40px;
line-height:40px;
font-size:25px;
color:#fff;
}
.buyNow {
width:80%;
margin:auto;
height:40px;
line-height:40px;
font-size:18px;
color:#fff;
background:#148d75;
border:none;
padding:0px !important;
transition:all 0.3s;
-ms-transition:all 0.3s
}
.buyNow:hover {
background:#0e6957;
}
.moreInfo {
width:80%;
margin:5px auto 0 -4px;
height:40px;
line-height:40px;
font-size:18px;
color:#fff;
background:#34495e;
padding:0px !important;
border:none;
transition:all 0.3s;
-ms-transition:all 0.3s
}
.moreInfo:hover {
background:#2c3e50;
}
.btn {
padding:0;
}
.navbar-default .navbar-nav>li>a {
padding:0;
}
a {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
transition: color 200ms linear;
}
body {
/*background:@bg-light;*/
background: #fff;
font-family: "Raleway", sans-serif;
font-size: 13px;
color: #999999;
outline: none;
}
body.home {
background: #fff;
}
*,
a,
button,
input,
*:focus,
a:focus,
button:focus,
input:focus {
outline: none!important;
}
.centered {
float: none;
margin: 0 auto;
}
.neuton {
font-family: "Neuton", serif;
}
.neuton_bold {
font-family: "Neuton", serif;
font-weight: 700;
}
.neuton_italic {
font-family: "Neuton", serif;
font-style: italic;
}
.rale {
font-family: "Raleway", sans-serif;
}
.rale_medium {
font-family: "Raleway", sans-serif;
font-weight: 500;
}
.rale_bold {
font-family: "Raleway", sans-serif;
font-weight: 700;
}
h1,
h2,
h3,
h4 {
font-family: "Neuton", serif;
color: #9a8e87;
}
h1 {
font-size: 48px;
line-height: 45px;
}
h2 {
font-size: 25px;
line-height: 22px;
}
a {
color: #666;
}
a:hover,
a:focus {
text-decoration: underline;
color: #333333;
}
.touch .touch-hide {
display: none;
}
.no-touch .touch-show {
display: none;
}
.touch .touch-show {
display: block;
}
.btn {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
border-radius: 0;
-webkit-border-radius: 0;
padding: 15px 45px;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
background: #e2dbd7;
color: #fff;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open .dropdown-toggle.btn {
color: #ffffff;
background-color: #b5afac;
}
.btn-red {
color: #ffffff;
background-color: #cc3300;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
color: #ffffff;
background-color: #a32900;
}
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
background-image: none;
}
.form-group {
margin-bottom: 35px;
}
.control-label {
font-size: 16px;
color: #9a8e87;
font-family: "Raleway", sans-serif;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 15px;
}
.form-control {
border-radius: 0;
-webkit-border-radius: 0;
background: none;
font-family: "Raleway", sans-serif;
color: #b7b7b7;
font-size: 14px;
box-shadow: none;
-webkit-box-shadow: none;
padding: 15px 10px;
height: 48px;
border: 1px solid #cac2b5;
}
.form-control:focus {
box-shadow: none;
border-color: #7c7c7c !important;
}
.form-control.required {
border-color: #cc3300!important;
border-left-width: 7px;
}
.control-label.required {
color: #cc3300;
}
.selectizer.required .selectizer-label {
border-color: #cc3300;
}
.right {
float: right;
}
.navbar-default {
height: 102px;
border-bottom: 1px solid #e9e7e6;
}
.navbar-nav > li {
padding: 15px;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
height: 102px;
padding-top: 40px;
}
.navbar-nav > li > a {
padding: 0;
}
header {
background: #148d75 !important;
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
transition: height 200ms linear;
}
header ul {
margin: 0;
padding: 0;
}
header .navbar-collapse {
float: right;
}
header nav {
float: right;
border-right: 1px solid #E9E7E6;
/* background: @bg-light;*/
}
header nav li {
/*border-left: 1px solid rgba(229,227,225,0); border-right: 1px solid rgba(229,227,225,0);*/
/*border-bottom: 1px solid @line-light;*/
cursor: pointer;
}
header nav a {
color: #dad1cd!important;
overflow: hidden;
height: 20px;
display: inline-block;
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
}
header nav a span {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
header nav li:hover,
header nav li.active {
/*background: @nav-light-hover-bg;*/
border-left-color: #e9e7e6;
border-right-color: #e9e7e6;
/*border-bottom: 1px solid @bg-light;*/
}
header nav li:hover a,
header nav li.active a {
color: #a49993!important;
}
header nav li.active {
background: #fff;
border-left: 1px solid #e9e7e6;
border-right: 1px solid #e9e7e6;
}
header nav li:not(.active) a span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100%;
text-align: center;
}
header nav li:not(.active):hover a span,
header nav li:not(.active) a:focus span {
-webkit-transform: translatey(-100%);
-moz-transform: translatey(-100%);
transform: translatey(-100%);
}
header .user {
float: right;
}
header .user li {
list-style: none;
float: left;
border-right: 0;
}
header .user li a {
height: 102px;
padding: 0 15px;
display: inline-block;
padding-top: 43px;
font-weight: 600;
font-size: 15px;
text-decoration: none!important;
}
header .user li a .mask {
width: 16px;
height: 16px;
overflow: hidden;
display: inline-block;
}
header .user li a .mask span {
display: block;
width: 16px;
height: 32px;
text-indent: -9999px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition-delay: .05s;
-webkit-transition-delay: .05s;
}
header .user li a .num {
color: #cc3300;
}
header .user li a:hover .mask span,
header .user li a.active .mask span {
transition-delay: 0;
-webkit-transition-delay: 0;
-webkit-transform: translate(0px, -16px);
-moz-transform: translate(0px, -16px);
transform: translate(0px, -16px);
/*margin-top: -16px*/
}
header .user li.profile {
margin-right: 2px;
}
header .user li.profile a .mask span {
background: url('../images/header-user-light.png') 0 0 no-repeat;
}
header .user li.cart a .mask span {
background: url('../images/header-cart-light.png') 0 0 no-repeat;
}
header .user li.cart a.active .mask span {
background-image: url("../images/header-cart-light-active.png");
}
header .user li.lang a {
padding-top: 20px;
padding-right: 0;
-webkit-transition: padding-top 200ms linear;
-moz-transition: padding-top 200ms linear;
transition: padding-top 200ms linear;
}
header .user li.lang span {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
border: 1px solid #e9e7e6;
text-align: center;
color: #e9e7e6;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
header .user li.lang span:hover {
color: #a49993;
text-decoration: none;
border-color: #a49993;
}
.navbar-nav > li.li-language,
.touch header .navbar-nav > li.li-language {
border-top: 1px solid #f0edeb !important;
}
.home.menu-abs header {
position: absolute;
top: 0 !important;
}
.navbar-collapse.in nav,
.navbar-collapse.collapsing nav {
float: none;
border-right: none;
padding-right: 0;
height: auto;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #bfb6b1;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #a49993;
}
.navbar-nav > li:last-child {
border-right: 0;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
#header-logo {
display: block;
width: 170px;
height: 102px;
float: left;
position: relative;
overflow: hidden;
background: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0;
padding: 0;
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
transition: height 300ms linear;
}
#header-logo span {
display: block;
width: 170px;
height: 102px;
z-index:-1;
position: relative;
background: url('../images/logo.png') 0 0 no-repeat;
position: absolute;
top: 0;
left: 0;
text-indent: -9999px;
-webkit-transition: margin 200ms ease-in-out;
-moz-transition: margin 200ms ease-in-out;
-ms-transition: margin 200ms ease-in-out;
-o-transition: margin 200ms ease-in-out;
transition: margin 300ms ease-in-out;
}
.navbar-default .navbar-nav>li>a {
padding:0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" id="header-logo" href="http://folksverona.com/"><span>Folks Verona</span></a>
</div>
<div class="user">
<ul>
<li class="profile">
<a href="http://folksverona.com/user">
<span class="mask"><span>Profile</span></span>
</a>
</li>
<li class="cart">
<a href="http://folksverona.com/shop/cart" id="bt-cart" >
<span class="mask"><span>Cart</span></span>
<span class="num"></span>
</a>
</li>
<li class="lang hidden-xs">
<a href="http://folksverona.it"><span>Help</span></a>
</li>
</ul>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse">
<nav class="clearfix">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="#home"><span data-hover="Home">Home</span></a></li>
<li class=""><a href="#shop"><span data-hover="Shop">Shop</span></a></li>
<li class=""><a href="#test"><span data-hover="Test">Test</span></a></li>
<li class=""><a href="#about"><span data-hover="About">About</span></a></li>
<li class=""><a href="#contact"><span data-hover="Contact">Contact</span></a></li>
<li class="visible-xs li-language"><a href="http://folksverona.it"><span data-hover="IT">IT</span></a></li>
</ul>
</nav>
</div>
</div>
</header>
我建议您查看JSFIDDLE link，因为它更准确。
答案 0 :(得分：0)
试试这个
body {
background-image:url('../images/geometry2.jpg');
}
.homeBody {
display:none;
}
header {
padding:0 !important;
margin:0 !important;
font-family:"Raleway", sans-serif !important;
}
header nav a {
color:#fff !important;
font-family:"Raleway", sans-serif !important;
}
.navbar-nav > li {
color:#fff !important;
font-family:"Raleway", sans-serif !important;
}
header nav li:hover a, header nav li.active a {
color:#ecf0f1 !important;
}
header nav li:hover, header nav li.active {
color:#ecf0f1 !important;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#fff;
}
.navbar-default .navbar-toggle {
border-color:#fff;
}
.linkContain {
position:absolute;
}
@media screen and (max-width: 767px) {
.navbar-nav > li, .menu-small header .navbar-nav > li, .touch header .navbar-nav > li {
background:#0e6957;
}
}
.title {
width:100%;
margin-top:120px;
text-align:center;
font-family:'Lato', sans-serif, serif;
font-size:50px;
color:#2d2d2d;
}
.images-3 {
margin-top:30px;
}
.incenseTypes {
width:80%;
margin:40px auto 0 auto;
}
.smolder {
width:80%;
margin:40px auto 0 auto;
}
.smolder img {
width:100%;
}
.view-button {
width:100%;
height:50px;
line-height:50px;
background:#16a085;
color:#fff;
font-size:24px;
}
.view-button:hover {
background:#0e6957;
}
.aboutSection {
width:80%;
margin:auto;
}
.infoTitle {
font-family:'Lato', sans-serif, serif;
}
.infoTitle2 {
font-size:35px;
font-family:'Lato', sans-serif, serif;
}
.infoBullets {
font-size:18px;
}
.infoIntro {
font-size:18px;
}
.infoLink {
color:#3aa5d2;
}
footer {
height:100px;
background:#148d75;
color:#fff;
font-size:23px;
}
footer a {
color:#fff;
}
footer a:hover {
text-decoration:none;
color:#4cbceb;
}
.copyrightRow {
margin-top:15px;
}
ul.social-buttons {
margin-top: -10px;
margin-bottom: 0;
}
.social-buttons {
text-align:center;
}
.fa-facebook {
width:50px;
height:50px;
display:block;
background-image:url('../images/home/icons/facebook.svg');
background-repeat:no-repeat;
transition:all 0.4s;
}
.fa-facebook:hover {
background-image:url('../images/home/icons/facebookHover.svg');
}
.fa-twitter {
width:50px;
height:50px;
display:block;
background-image:url('../images/home/icons/twitter.svg');
background-repeat:no-repeat;
transition:all 0.4s;
}
.fa-twitter:hover {
background-image:url('../images/home/icons/twitterHover.svg');
}
.topScentsTitle {
width:80%;
margin:auto;
text-align:center;
font-size:35px;
color:#2d2d2d;
}
.topScents {
width:80%;
margin:20px auto 0 auto;
}
.buyNow {
width:80%;
margin:auto;
height:40px;
line-height:40px;
font-size:25px;
color:#fff;
}
.buyNow {
width:80%;
margin:auto;
height:40px;
line-height:40px;
font-size:18px;
color:#fff;
background:#148d75;
border:none;
padding:0px !important;
transition:all 0.3s;
-ms-transition:all 0.3s
}
.buyNow:hover {
background:#0e6957;
}
.moreInfo {
width:80%;
margin:5px auto 0 -4px;
height:40px;
line-height:40px;
font-size:18px;
color:#fff;
background:#34495e;
padding:0px !important;
border:none;
transition:all 0.3s;
-ms-transition:all 0.3s
}
.moreInfo:hover {
background:#2c3e50;
}
.btn {
padding:0;
}
.navbar-default .navbar-nav>li>a {
padding:0;
}
a {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
transition: color 200ms linear;
}
body {
/*background:@bg-light;*/
background: #fff;
font-family: "Raleway", sans-serif;
font-size: 13px;
color: #999999;
outline: none;
}
body.home {
background: #fff;
}
*,
a,
button,
input,
*:focus,
a:focus,
button:focus,
input:focus {
outline: none!important;
}
.centered {
float: none;
margin: 0 auto;
}
.neuton {
font-family: "Neuton", serif;
}
.neuton_bold {
font-family: "Neuton", serif;
font-weight: 700;
}
.neuton_italic {
font-family: "Neuton", serif;
font-style: italic;
}
.rale {
font-family: "Raleway", sans-serif;
}
.rale_medium {
font-family: "Raleway", sans-serif;
font-weight: 500;
}
.rale_bold {
font-family: "Raleway", sans-serif;
font-weight: 700;
}
h1,
h2,
h3,
h4 {
font-family: "Neuton", serif;
color: #9a8e87;
}
h1 {
font-size: 48px;
line-height: 45px;
}
h2 {
font-size: 25px;
line-height: 22px;
}
a {
color: #666;
}
a:hover,
a:focus {
text-decoration: underline;
color: #333333;
}
.touch .touch-hide {
display: none;
}
.no-touch .touch-show {
display: none;
}
.touch .touch-show {
display: block;
}
.btn {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
border-radius: 0;
-webkit-border-radius: 0;
padding: 15px 45px;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
background: #e2dbd7;
color: #fff;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open .dropdown-toggle.btn {
color: #ffffff;
background-color: #b5afac;
}
.btn-red {
color: #ffffff;
background-color: #cc3300;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
color: #ffffff;
background-color: #a32900;
}
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
background-image: none;
}
.form-group {
margin-bottom: 35px;
}
.control-label {
font-size: 16px;
color: #9a8e87;
font-family: "Raleway", sans-serif;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 15px;
}
.form-control {
border-radius: 0;
-webkit-border-radius: 0;
background: none;
font-family: "Raleway", sans-serif;
color: #b7b7b7;
font-size: 14px;
box-shadow: none;
-webkit-box-shadow: none;
padding: 15px 10px;
height: 48px;
border: 1px solid #cac2b5;
}
.form-control:focus {
box-shadow: none;
border-color: #7c7c7c !important;
}
.form-control.required {
border-color: #cc3300!important;
border-left-width: 7px;
}
.control-label.required {
color: #cc3300;
}
.selectizer.required .selectizer-label {
border-color: #cc3300;
}
.right {
float: right;
}
.navbar-default {
height: 102px;
border-bottom: 1px solid #e9e7e6;
}
.navbar-nav > li {
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
padding: 0;
}
.navbar-nav > li > a {
padding: 0;
}
header {
background: #148d75 !important;
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
transition: height 200ms linear;
}
header ul {
margin: 0;
padding: 0;
}
header .navbar-collapse {
float: right;
}
header nav {
float: right;
border-right: 1px solid #E9E7E6;
/* background: @bg-light;*/
}
header nav li {
/*border-left: 1px solid rgba(229,227,225,0); border-right: 1px solid rgba(229,227,225,0);*/
/*border-bottom: 1px solid @line-light;*/
cursor: pointer;
}
header nav a {
color: #dad1cd!important;
overflow: hidden;
height: 20px;
display: inline-block;
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
}
header nav a span {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
header nav li:hover,
header nav li.active {
/*background: @nav-light-hover-bg;*/
border-left-color: #e9e7e6;
border-right-color: #e9e7e6;
/*border-bottom: 1px solid @bg-light;*/
}
header nav li:hover a,
header nav li.active a {
color: #a49993!important;
}
header nav li.active {
background: #fff;
border-left: 1px solid #e9e7e6;
border-right: 1px solid #e9e7e6;
}
header nav li:not(.active) a span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100%;
text-align: center;
}
header nav li:not(.active):hover a span,
header nav li:not(.active) a:focus span {
/* -webkit-transform: translatey(-100%);
-moz-transform: translatey(-100%);
transform: translatey(-100%);*/
}
header .user {
float: right;
}
header .user li {
list-style: none;
float: left;
border-right: 0;
}
header .user li a {
height: 102px;
padding: 0 15px;
display: inline-block;
padding-top: 43px;
font-weight: 600;
font-size: 15px;
text-decoration: none!important;
}
header .user li a .mask {
width: 16px;
height: 16px;
overflow: hidden;
display: inline-block;
}
header .user li a .mask span {
display: block;
width: 16px;
height: 32px;
text-indent: -9999px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition-delay: .05s;
-webkit-transition-delay: .05s;
}
header .user li a .num {
color: #cc3300;
}
header .user li a:hover .mask span,
header .user li a.active .mask span {
transition-delay: 0;
-webkit-transition-delay: 0;
-webkit-transform: translate(0px, -16px);
-moz-transform: translate(0px, -16px);
transform: translate(0px, -16px);
/*margin-top: -16px*/
}
header .user li.profile {
margin-right: 2px;
}
header .user li.profile a .mask span {
background: url('../images/header-user-light.png') 0 0 no-repeat;
}
header .user li.cart a .mask span {
background: url('../images/header-cart-light.png') 0 0 no-repeat;
}
header .user li.cart a.active .mask span {
background-image: url("../images/header-cart-light-active.png");
}
header .user li.lang a {
padding-top: 20px;
padding-right: 0;
-webkit-transition: padding-top 200ms linear;
-moz-transition: padding-top 200ms linear;
transition: padding-top 200ms linear;
}
header .user li.lang span {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
border: 1px solid #e9e7e6;
text-align: center;
color: #e9e7e6;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
header .user li.lang span:hover {
color: #a49993;
text-decoration: none;
border-color: #a49993;
}
.navbar-nav > li.li-language,
.touch header .navbar-nav > li.li-language {
border-top: 1px solid #f0edeb !important;
}
.home.menu-abs header {
position: absolute;
top: 0 !important;
}
.navbar-collapse.in nav,
.navbar-collapse.collapsing nav {
float: none;
border-right: none;
padding-right: 0;
height: auto;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #bfb6b1;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #a49993;
}
.navbar-nav > li:last-child {
border-right: 0;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: 0;
}
#header-logo {
display: block;
width: 170px;
height: 102px;
float: left;
position: relative;
overflow: hidden;
background: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0;
padding: 0;
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
transition: height 300ms linear;
}
#header-logo span {
display: block;
width: 170px;
height: 102px;
z-index:-1;
position: relative;
background: url('../images/logo.png') 0 0 no-repeat;
position: absolute;
top: 0;
left: 0;
text-indent: -9999px;
-webkit-transition: margin 200ms ease-in-out;
-moz-transition: margin 200ms ease-in-out;
-ms-transition: margin 200ms ease-in-out;
-o-transition: margin 200ms ease-in-out;
transition: margin 300ms ease-in-out;
}
.navbar-default .navbar-nav>li>a {
padding:0;
}
.navbar-default .navbar-nav > li > a {
color: #777;
display: block;
height: auto;
margin: 0;
width: 100%;
}
.nav.navbar-nav.navbar-right span {
padding: 40px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" id="header-logo" href="http://folksverona.com/"><span>Folks Verona</span></a>
</div>
<div class="user">
<ul>
<li class="profile">
<a href="http://folksverona.com/user">
<span class="mask"><span>Profile</span></span>
</a>
</li>
<li class="cart">
<a href="http://folksverona.com/shop/cart" id="bt-cart" >
<span class="mask"><span>Cart</span></span>
<span class="num"></span>
</a>
</li>
<li class="lang hidden-xs">
<a href="http://folksverona.it"><span>Help</span></a>
</li>
</ul>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse">
<nav class="clearfix">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="#home"><span>Home</span></a></li>
<li class=""><a href="#shop"><span>Shop</span></a></li>
<li class=""><a href="#test"><span>Test</span></a></li>
<li class=""><a href="#about"><span>About</span></a></li>
<li class=""><a href="#contact"><span>Contact</span></a></li>
<li class="visible-xs li-language"><a href="http://folksverona.it"><span>IT</span></a></li>
</ul>
</nav>
</div>
</div>
</header>