I have 4 menu elements and next to them located languages, when i hover on languages they are moving from right to left and pushing menu. How to apply smooth animation effect for that pushing? Please check link below so you can understand clearly what i mean.
HTML:
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Materials</li>
<li><a class="active" href="portfolio.html">Portfolio</a></li>
<li>Contacts</li>
<span class="lang">
<li>EN</li>
<li>DE</li>
<li>RU</li>
</span>
</ul>
CSS:
#keyframes languageIn {
0% { transform: translateX(100%); opacity:0; }
100% { transform: translateX(0); opacity:1; }
}
.navbar-nav a {
line-height: 40px !important;
position:relative;
}
.navbar-nav li > a:hover,
.navbar-nav li > a:active {
transition: .5s ease-in-out;
color: #ff0000 !important;
}
.navbar-nav a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #ff0000;
transition: width .3s;
}
.navbar-nav a:focus::after:not(.lang li a) {
width: 100%;
}
.navbar-nav a.active::after {
display: block;
width: 100%;
height: 2px;
background: #ff0000;
transition: width .3s;
}
.nav > li > a {
padding:0px;
}
.nav li {
padding-right:40px;
}
.lang li {
font-size: 14px;
display: inline-block;
padding-left: 7px;
animation: goIn .5s ease-out;
}
.lang li:not(:last-child) {
display:none;
}
.lang:hover li:not(:last-child) {
display:inline-block;
animation: languageIn .5s ease-in-out;
}
Here is full code:
https://codepen.io/anon/pen/dRzxmR
I tweaked your code a little, so now it will work.
It plays with the width, and uses transition instead of animation.
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
a {
text-decoration: none !important;
color: #222222;
}
a:hover {
color: #ff0000;
cursor: pointer;
}
html,body {
color: #191818;
font-size: 14px;
font-family: "Museo Sans Cyrl 100", sans-serif;
animation: fadein 4.5s
height: 100%;
}
/* Animate on Loading page*/
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.navbar-default {
z-index:99;
font-size: 14px;
background-color: rgba(248,248,248,.6);
}
.navbar-nav a {
line-height: 40px !important;
position:relative;
/*top:20px;*/
}
.navbar-nav li > a:hover,
.navbar-nav li > a:active {
transition: .5s ease-in-out;
color: #ff0000 !important;
}
.navbar-nav a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #ff0000;
transition: width .3s;
}
.navbar-nav a:focus::after:not(.lang li a) {
width: 100%;
}
.navbar-nav a.active::after {
display: block;
width: 100%;
height: 2px;
background: #ff0000;
transition: width .3s;
}
.navbar-nav .active {
color: #ff0000 !important;
}
.nav > li > a {
padding:0px;
}
.nav li {
padding-right:40px;
}
.logo-block {
margin-left: 120px;
}
.logo-block h1 {
color: #1b1a18;
font-size: 22px;
}
.logo {
width: 40px;
height: 40px;
background-color: transparent;
border-radius: 50%;
border: 3px solid red;
float: left;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 1;
}
.nav-palceholder {
margin: 0 0 20px 0;
}
.navbar-brand h5{
font-weight: 900;
margin: 1px 0px 0px 0;
padding: 0 0 0 50px;
font-size: 17px;
}
.navbar-collapse{
width: 100%;
}
/* PLACE WHERE LANGUAGE CONFIGURES */
.lang li {
font-size: 14px;
display: inline-block;
padding-left: 7px;
animation: goIn .5s ease-out;
}
.lang li:not(:last-child) {
transform: translateX(100%); opacity:0; width: 0;
display: inline-block;
transition: .5s ease-in-out;
}
.lang:hover li:not(:last-child) {
transform: translateX(0); opacity:1; width: 2em;
}
.lang li a {
color: #ff0000;
}
span.lang li {
padding-right: 0px !important;
}
/*nav fix*/
.navbar {
border-radius: 0px !important;
}
.navbar-default {
border-color: transparent !important;
}
span.lang li {
padding-right: 0px !important;
}
.navbar-padding{
padding: 15px 0 !important;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>logo style</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand col-xs-7 col-sm-6 col-md-6">
<div class="logo"></div>
<h5>Logo<br> style</h5>
<div class="clear"></div>
</a>
<div class="clear"></div>
</div>
<div class="collapse navbar-collapse navbar-padding" id="bs-example-navbar-collapse-1 ">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Materials</li>
<li><a class="active" href="portfolio.html">Portfolio</a></li>
<li>Contacts</li>
<span class="lang">
<li>EN</li>
<li>DE</li>
<li>RU</li>
</span>
</ul>
</div><!-- navbar-collapse -->
</div><!--Container-->
</nav>
</header>
<script src="js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
https://codepen.io/anon/pen/gRGYNb
Related
Here you can see the background on the ankers that I don't want!
I'm pretty new to coding hopefully you can solve my problem very thankful for help in advance!
So the problem is basically that my ankers are showing a background that shouldn't be there, i added one for the whole page but didn't set one for the ankers. Also if I remove the background the ankers will get a white one (obviously). Also they have a really weird resolution and stretch over the screen what I don't want
:root {
font-family: 'Source Sans Pro', sans-serif;
}
* {
margin: 0%;
padding: 0;
text-decoration: none;
background: #272823;
}
/* COLOR CODES: #ffec4c, #848668, #272823*/
/* NAVBAR STYLING */
.navbar {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
padding-top: 0;
width: 100%;
background-color: #272823;
z-index: 2;
}
.navbar-box {
position: relative;
height: 101px;
}
.navbar-logo {
margin-left: 20px;
}
.navbar-logo img{
width: 85px;
margin-top: 8px;
margin-left: 26px;
}
.navbar-menu {
margin-right: 53px;
margin-top: -60px;
float: right;
}
.navbar-menu li {
display: inline-block;
}
.navbar-menu li a {
margin-right: 30px;
font-size: 21px;
color: #fff;
display: inline-block;
transition: color 0.5s ease;
}
.navbar-menu li a {
border-bottom: 2.5px solid transparent;
transition: border-bottom 0.5s ease;
}
.navbar-menu li a:hover{
border-bottom: 2.5px solid #ffec4c;
}
.navbar-menu li a:hover {
color: #ffec4c;
}
/* HOME STYLING */
.home-bg {
padding-top: 0%;
position: absolute;
filter:blur(2px);
background: linear-gradient(0deg, rgba(172, 133, 28, 0.8), rgba(0, 0, 0, 0.5)), url(img/Aliens\ Cows.jpg);
background-size: cover;
width: 100%;
height: 603px;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel Salzmann</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/Logo 1.png" type="image/icon type">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<!-- nav seciton -->
<nav class="navbar">
<div class="navbar-box">
<div class="navbar-logo"><img src="img/Logo 1.png" alt="Logo"></div>
<ul class="navbar-menu">
<li>Home</li>
<li>Creations</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
<!-- home section -->
<div class="home">
<div class="home-text">
<a class="text-1" href="creations.html">MY WORK</a>
<a class="text-2" href="creations.html">SEE ALL MY WORK!</a>
</div>
</div>
<div class="home-bg"></div>
</body>
</html>
From MDN: Universal selectors
The CSS universal selector (*) matches elements of any type.
/* Selects all elements */
* {
color: green;
}
* {
color: red;
}
<p>text</p>
<h4>more text</h4>
<div>this is a div</div>
<h5>another text</h5>
<article>something</article>
So instead of using * to add a background color you could just add the color to body:
body {
background-color: #272823;
}
And to make the text appear on top of the image add the following:
.home-text {
position: absolute;
z-index: 1;
}
Here is an example:
:root {
font-family: 'Source Sans Pro', sans-serif;
}
body {
background-color: #272823;
}
* {
margin: 0%;
padding: 0;
text-decoration: none;
}
/* COLOR CODES: #ffec4c, #848668, #272823*/
/* NAVBAR STYLING */
.navbar {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
padding-top: 0;
width: 100%;
/* background-color: #272823; */
z-index: 2;
}
.navbar-box {
position: relative;
height: 101px;
}
.navbar-logo {
margin-left: 20px;
}
.navbar-logo img {
width: 85px;
margin-top: 8px;
margin-left: 26px;
}
.navbar-menu {
margin-right: 53px;
margin-top: -60px;
float: right;
}
.navbar-menu li {
display: inline-block;
}
.navbar-menu li a {
margin-right: 30px;
font-size: 21px;
color: #fff;
display: inline-block;
transition: color 0.5s ease;
}
.navbar-menu li a {
border-bottom: 2.5px solid transparent;
transition: border-bottom 0.5s ease;
}
.navbar-menu li a:hover {
border-bottom: 2.5px solid #ffec4c;
}
.navbar-menu li a:hover {
color: #ffec4c;
}
/* HOME STYLING */
.home-bg {
padding-top: 0%;
position: absolute;
filter: blur(2px);
background: linear-gradient( 0deg, rgba(172, 133, 28, 0.8), rgba(0, 0, 0, 0.5)), url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSo3XYpwymh9Xsm2fOKWtEmnk971QTn8xyfU3fJwGFXpNh1Mt_9Ivge-pzlQJ3nO6VNfBA&usqp=CAU);
background-size: cover;
width: 100%;
height: 603px;
background-repeat: no-repeat;
}
.home-text {
position: absolute;
z-index: 1;
}
<nav class="navbar">
<div class="navbar-box">
<div class="navbar-logo">
<img src="https://i.stack.imgur.com/80JXf.jpg?s=48&g=1" alt="Logo" />
</div>
<ul class="navbar-menu">
<li>Home</li>
<li>Creations</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
<!-- home section -->
<div class="home">
<div class="home-text">
<a class="text-1" href="creations.html">MY WORK</a>
<a class="text-2" href="creations.html">SEE ALL MY WORK!</a>
</div>
</div>
<div class="home-bg"></div>
The navbar-collapse collapses/disappears when clicking a menu link to an actual "page" but it doesn't collapse/disappear when clicking a "custom" menu link to scroll to a different section on the same page.
I have the navbar-collapse appearing as a full screen when toggling the Hamburger Icon. The JQuery fixes this but it still doesn't work on IOS Safari.
HERE IS MY CSS
* { cursor: pointer; }
#site-header{
height: 85px;
top: 0;
z-index: 3000;
}
.logged-in #site-header{
top: 32px;
}
#primary {
margin-top: 85px;
}
.nav {
display: block;
}
.navbar {
height: 75px;
width: 100%;
padding: 0;
background: black;
}
.navbar-nav {
float: none!important;
}
.navbar-collapse {
position: absolute;
background: black;
width: 100%;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 35px;
border: 0px;
margin-top: 0px;
height: 110vh;
left: 0;
top:0;
background-size: cover;
}
.navbar-image {
position: absolute;
opacity: .2;
right: 0px;
top:0%;
margin-top: -15px;
padding-left: 30px;
padding-right: 30px;
bottom: 0;
margin: auto;
z-index: 1;
}
.navbar-image:hover, .navbar-image:active {
-webkit-transition-duration: 5.8s;
-moz-transition-duration: 5.8s;
-o-transition-duration: 5.8s;
transition-duration: 5.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .01s;
-moz-transition: height .01s;
-ms-transition: height .01s;
-o-transition: height .01s;
transition: height .01s;
}
.navbar-collapse ul {
position: absolute;
margin-left: 50px;
margin-top: 80px;
z-index: 2;
}
.navbar-collapse ul li {
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.navbar-collapse ul li a{
color: white!important;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 300;
}
HERE IS THE HTML
<header id="site-header" class="container-fluid">
<nav class="navbar fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler disable" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar top-menu"></span>
<span class="icon-bar mid-menu"></span>
<span class="icon-bar bottom-menu"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav">
<li class="menu-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="nav-link" href="#">Somthing Else</a>
</li>
</ul>
</div>
</div>
</nav>
JQUERY
(function ($) {
$(document).ready(function () {
$(".navbar-collapse ul li a").on("click", function () {
$(".navbar-collapse").collapse("hide");
});
});
})(jQuery);
Currently coding a responsive navbar however 2 things are really bothering me that I can't get my head round. Any help would be appreciated:
1/ With my original logo pic I have been using, I have got the nav links to line up with it (like a sort of display inblock) but I have noticed only lines up in full screen view, as you minimize the screen the links cluster up underneath and then eventually disappear when the screen is really small and the togglebox appears. How can you fix this problem.
2/ I can’t get the icons to hide from the links in fullscreen view, yet I have done the display:none in the coding
My html code so far:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
My CSS so far:
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}
Put de icon into a div block and hidden the div object.
<div class="boton-menu"><i class="fa fa-bars"></i></div>
and the css:
.boton-menu{
display: none;
}
.fa:fullscreen {
display: none
}
... should do it.
At this point, unprefixed support sits at 1.99% while the prefixed support should be 81.71%:
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
However, in my Chrome (v70.0.3538.77) it doesn't seem to work.
According to this article Chrome v71 will support it.
Spec here.
Browser compat here.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header {
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1 {
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left: 0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #802CED;
color: #000000;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align: right;
color: rgba(185, 153, 2, 1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right: 1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #000000;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
I am having some issues with creating this transparent dropdown effect in Bootstrap:
At the time of writing, it looks like this:
I've added a jsfiddle here in which I am experimenting trying to get the effect but it just doesnt seem to be working: https://jsfiddle.net/vuv9on49/. It also seems like the positioning of the dropdown is a bit off, it overlaps over the main navbar a bit, as seen in the second photo.
HTML
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 2em;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
How can I correct this?
I have changed in css margin-top:2em to margin-top:32px. I have increased little bit margin because dropdown depends on parent div and parent div(li) has below some space that's why dropdown overwrite to menu.
.navbar .navbar-nav {
margin-top: 32px;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 32px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve this
social icons hover effect
The dark background should moves down and fill the box on mouse over. This works perfectly when I use no background for the parent container but the hover effect goes behind the parent container when a background image is used.
Screenshot: not showing when bg image set for parent container
and I can see the effect when an opacity value is set for the parent container.
I've tried using negative z-index for the parent but not working for some reason.
My code
.hero {
background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
background-size: cover;
height: 550px;
padding: 40px 10px;
/*opacity :0.5; Works in Background*/
}
.social-icons {
}
.social-icons li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 60px 5px 5px 60px;
text-decoration: none;
position: relative;
border: 3px solid #000;
overflow: hidden;
transition: all .5s linear;
}
.social-icons li:hover {
color: #000;
}
.social-icons li:hover:before {
left: -55px;
}
.social-icons li:before {
content: "";
position: absolute;
top: 0;
left: -280px;
background: #000;
height: 100%;
width: 250px;
transform: skew(-50deg);
z-index: -1;
transition: all .5s linear;
}
.social-icons li a {
color: #000000;
display:block;
}
.social-icons li:hover a {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="hero">
<div class="container">
<div class="row">
<div class="social-icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
</section>
Do like this, give the anchor a a position, i.e. position: relative and remove the z-index.
I also adjusted your li:before/li:hover:before rules a little, so the transition work both ways.
.hero {
background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
background-size: cover;
height: 550px;
padding: 40px 10px;
/*opacity :0.5; Works in Background*/
}
.social-icons {
}
.social-icons li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 60px 5px 5px 60px;
position: relative;
border: 3px solid #000;
overflow: hidden;
}
.social-icons li:hover {
color: #000;
}
.social-icons li:before {
content: "";
position: absolute;
top: 0;
left: 280px;
background: #000;
height: 100%;
transform: skew(-50deg);
width: 250px;
transition: left .2s linear;
}
.social-icons li:hover:before {
left: -20px;
transition: left .2s linear;
}
.social-icons li a {
position: relative;
color: #000000;
display:block;
}
.social-icons li:hover a {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="hero">
<div class="container">
<div class="row">
<div class="social-icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
</section>