can't figure out why this class isn't working - html

.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

Related

the navigation bar isn't included or aligned with my header for some reason

I'm pretty new to using css and html. I don't know why the nav part doesn't have the same background and it's not at the same height as the logo.
I'd really appreciate the help!
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>

What I've done is following:
header {
display: flex;
justify-content: space-between;
align-items:center;
}
and removed display: block; from nav a
Hopefully this makes sense and it doesn't need explanation. If yes, tell me, I will explain it to you.
This way, it's fixed. Full code:
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
}
header {
display: flex;
justify-content: space-between;
align-items:center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>

you can use flex with space between and align item center.
* {
border: 1px solid red;
}
body{
font-family: sans-serif;
}
header{
background-color: #14597f;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
text-align: right;
}
nav li{
display: inline-block;
}
nav a{
color: #ffff;
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 10px 10px;
}
nav a:hover{
background-color: #ca0ed1 ;
}
.active{
background-color: #1fb5e9;
border-radius: 4px;
}
<header>
<a href="./index.html" >
<img class="logo" src="assets/img/logo.svg" alt="logo" width="200px">
</a>
<nav>
<ul>
<li><a class="active" href="index.html"> Accueil</a></li>
<li> Produits</li>
<li> Contact</li>
<li><a class="shopping-cart" href="./shopping-cart.html" title="Panier">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x fa-inverse"></i>
<i class="fa fa-shopping-cart fa-stack-1x"></i>
</span>
<span class="count">3</span></a>
</li>
</ul>
</nav>
</header>

How to add Chevron at the end of each list item, aligned from the right

I want to add a Chevron, at the end of each li, and I want to align all the Chevrons 5px from the end of the ul, like the image below:
How can I achive this?
ul {
background-color: cyan;
width: 120px;
}
<ul>
<li>Cars</li>
<li>Real Estate</li>
<li>Fashion</li>
<li>Sports</li>
</ul>
P.S. I am using font awesome's chevron: <i class="fas fa-chevron-right"></i>

Use :after selector for this
ul {
background-color: cyan;
width: 120px;
}
ul li a:after {
content:">";
float: right;
margin-right: 10px;
}
<ul>
<li>Cars</li>
<li>Real Estate</li>
<li>Fashion</li>
<li>Sports</li>
</ul>
Or using Fontawesome
ul {
background-color: cyan;
width: 120px;
}
ul li a .fas {
float: right;
margin-right: 10px;
font-size: 10px;
line-height: 1.6;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<ul>
<li>Cars <i class="fas fa-chevron-right"></i></li>
<li>Real Estate <i class="fas fa-chevron-right"></i></li>
<li>Fashion <i class="fas fa-chevron-right"></i></li>
<li>Sports <i class="fas fa-chevron-right"></i></li>
</ul>

I used:
<i class="fa fa-chevron-right"></i>
Also, these shivrons work as links.
ul {
background-color: cyan;
width: 120px;
}
ul li i{
float: right;
margin-right: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>Cars <i class="fa fa-chevron-right"></i></li>
<li>Real Estate <i class="fa fa-chevron-right"></i></li>
<li>Fashion <i class="fa fa-chevron-right"></i></li>
<li>Sports <i class="fa fa-chevron-right"></i></li>
</ul>

<li class="active"></li> not working for me, color of an icon is not working

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>

How do i use nth-child to the icons while hovering?

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

How to center font awesome icons to a background-image

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>