How do I use nth-child technique so that each time use hover a particular icon, it should change color and pop-up without disturbing the others. I tried and the effects are working for every icons not on a particular one.
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li a:nth-child(1):hover {
color: blue;
font-size: 25px;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
You want to use :nth-child(1) on the li and not on the a element. Like this:
.icon ul li:nth-child(1) a:hover
This selects the first li element among a collection of sibling li's. What you were trying to do was to select the first a element in a collection of sibling a's, but there is only one sibling a in each li.
Full demo:
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
font-size: 25px;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
Assign font-size to only one element either a or i. And use li:nth-child(1)
To make font larger on hover, instead of increasing font-size,
Try Css scale().
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Safari */
transform: scale(1.2)
The nth-child declaration should be based on li. In your code, you put it for the anchor tag. Here is the correct code.
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
font-size: 25px;
}
.icon ul li:nth-child(2) a:hover {
color: green;
font-size: 25px;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a {
font-size: 25px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
}
.icon ul li:nth-child(2) a:hover {
color: yellow;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>
<body>
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
padding: 10px;
display:inline-block;
}
.icon ul li a i {
font-size: 20px;
color: crimson;
-webkit-transition:transform .3s;
}
.icon ul li a i:hover {
color: blue;
-webkit-transform:scale(1.2);
-webkit-transition:transform .3s;
}
<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
no need nth-child
Related
I have a problem linking html(<li class="active"></li>) to icons and I do not know how to make icons different color after I click on them (color of an icon is black, when I click on an icon it does not stay white). I tried another way to get html in but then the animation did not work. I looked at millions of pages and I could not find an answer. On top of that, I am new to coding.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul
{
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li
{
list-style: none;
text-align: center;
display: block;
}
ul li:last-child
{
border-right: none;
}
ul li a
{
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon
{
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa
{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .icon .fa:last-child
{
color: #eeeeee;
}
ul li a:hover .icon .fa
{
transform: translateY(-100%);
}
/*
ul li a .name
{
position: relative;
height: 20px;
width: 100%;
display: block;
overflow: hidden;
}
ul li a .name span
{
display: block;
position: relative;
color: #000;
font-size: 18px;
line-height: 20px;
transition: 0.5s;
}
ul li a .name span:before
{
content: attr(data-text);
position: absolute;
top: -100%;
left 0;
width: 100%;
height: 100%;
color: #eeeeee;
}
ul li a:hover .name span
{
transform: translateY(20px);
}
*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<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>
<ul>
<div>
<ul>
<li class="active"></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Home">Home</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="About">About</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Contact">Contact</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Settings">Settings</span></div> -->
</a>
</li>
</ul>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I doubt you can solve this issue with a css-only solution - I might be wrong though.
Nevertheless you can do it with some Javascript trickery which goes a little like this:
layer an additional icon on top of your current icons, give it the desired color e.g. red and make it invisible by setting it's css opacity property to 0
attach a click event listener to the freshly created icons
inside the callback handler reset the opacity of all the red active icons to 0, reset the opacity of all the icons below (those that are used for the CSS animation effect) to 1, make the clicked icon visible and finally the two icons in the background invisible.
Here's an example (just click on 'Run code snippet'):
var buttons = document.getElementsByClassName("active");
buttons[0].addEventListener("click", clicked);
function clicked(e) {
var iconsToShow = document.querySelectorAll(`[class*="icon"]`);
iconsToShow.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.style.opacity = 1;
});
var iconsToHide = document.querySelectorAll(`[class*="active"]`);
iconsToHide.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.firstElementChild.style.opacity = 0;
});
var iconToHide = e.target.parentElement.parentElement.querySelectorAll(`[class*="icon"]`)[0];
iconToHide.style.opacity = 0;
e.target.style.opacity = 1;
}
for (var a = 0; a < buttons.length; a++) {
buttons[a].addEventListener("click", clicked);
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul {
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li {
list-style: none;
text-align: center;
display: block;
}
ul li:last-child {
border-right: none;
}
ul li a {
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon {
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa {
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .active .fa {
font-size: 40px;
transform: translateY(-250%);
color: #ff0e12;
opacity: 0;
}
ul li a .icon .fa:last-child {
color: #eeeeee;
}
ul li a:hover .icon .fa {
transform: translateY(-100%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<ul>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a class="button">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</body>
I'm trying to align font awesome icons in the middle of the of the background image when I add position:relative; and use top:xxpx; it works but I want to figure out a way where I don't have to use position. Attached is a fiddle of my code, and a snippet below.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding-left: 540px;
display: inline;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons">
<i class="fa fa-facebook-square fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-instagram fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-youtube-square fa-6" aria-hidden="true"></i>
</li>
</ul>
</div>
I would use display: flex; align-items: center; justify-content: center; on the parent to put the child in the dead center. Then use padding: 0 on the ul to remove the default left padding.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
display: flex;
align-items: center;
justify-content: center;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
You say you don't want to use position, but because it causes other elements to shift around on the page. If you use position: absolute on the ul, nothing else will move around because of that.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
position: relative;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0; margin: 0;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
.social-links {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
list-style: none;
}
.social-links li a:hover,
.social-links li a:focus {
color: #fff;
outline: none;
}
.social-links .nav li a {
font-weight: 400;
letter-spacing: 1px;
}
.phone{
float: right;
display: inline-block;
list-style: none;
}
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="top-bar">
<div class="container">
<ul class="social-links list-inline">
<li><a class="fa fa-facebook text-primary"></a></li>
<li><a class="fa fa-twitter text-primary"></a></li>
<li><a class="fa fa-instagram text-primary"></a></li>
<li><a class="fa fa-linkedin text-primary"></a></li>
</ul>
<ul class="phone list-inline">
<li><a class="fa fa-phone text-primary"></a></li>
</ul>
</div>
trying to make the icons inline and float phone to the right in bootstrap but i can't get it to work i dont know why i can't get the classes to work the only way that it works if i use style="" inside the ul
I have to display text left side and font awesome icon on the right side.Now I am getting all font awesome icon below of text.I think this may pretty simple, but still, I can not get it to work.Would you help me in this?
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
}
ul.address-top-menu {
list-style: none;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use Float. It will help you to push content to extreme right.
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
try to this..
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
display: inline-block;
}
Use float to handle the alignments. Check .top-contact-menu and ul.address-top-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: inline-block;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
float: left;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use flexbox over the class .top-contact-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
}
Try this:
.top-contact-menu:after{content:'';display:table;clear:both;}
.top-contact-menu h2{float:left;}
.address-top-menu{float:right;}
I have a navigation menu which works perfectly fine on large screen and mobile screen but as soon as i add a div above it, It breaks the navigation menu on large screen and mobile screen. See the fiddle here - https://jsfiddle.net/AwesomeHat/t9q2p2ut/ .
Navigation Menu when alone works perfectly fine see the fiddle here - https://jsfiddle.net/AwesomeHat/dwzhh6L1/.
Please increase & decrease the size of output window to see the menu's responsiveness and see how it is breaking the menu on both screens.
<!--Social Icons-->
<div id="social">
<a href="#" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<a href="#" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Whats New
<ul class="hidden">
<li>Just Launched</li>
<li>Launching Soon</li>
<li>Completed Projects</li>
</ul>
</li>
<li>Referral</li>
<li>Buyers Section
<ul class="hidden">
<li>EMI Calculator</li>
<li>Apply For Loan</li>
<li>Make an Enquiry</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
CSS Code -
/* logo */
.logo {
float: left;
margin-left: 55px;
margin-top: 30px;
}
/* Social Icons */
.icon-button {
display: inline-block;
color: white;
border: 0px;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
/* Navigation Menu */
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 2;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
width: 25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #161616;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px){
nav ul {
position: relative;
margin-top: 0px;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
}
Syntax error, close anchor tags inside social div
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
https://jsfiddle.net/Nagasai_Aytha/t9q2p2ut/2/
At 1st div your code will be like this:
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
You just forget to finish anchorage tag </a>