I placed an icon cart from Font Awesome in my Navigation Bar. The problem is that this line appears to the left below in the cart icon when I go over with my mouse. I tried a lot of things but I could not find a way to remove this line:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Σκοτεινή Πλευρά</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<nav>
<div class="row justify-content-center">
<div class="Basket">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="Basket_Number">2</span>
</a>
</div>
</div>
</nav>
</body>
</html>
.Basket {
display: inline-block;
text-align: center;
margin-right: 11px;
margin-bottom: -6px;
}
.Basket a {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
margin-top: 100px;
font-size: 30px;
width: 40px;
height: 40px;
color: #332f25;
transition: color 0.3s ease;
text-decoration: none;
}
.Basket_Number {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: -15px;
left: 35px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fe4c50;
font-size: 12px;
color: white;
}
Just add this css in to alter the hover state:
.Basket :hover {
text-decoration: none;
}
Use the :hover selector to get rid of the underline when hovering
.Basket a:hover {
text-decoration: none;
}
Related
I noticed my nav bar links were a bit off-centered with my logo on the left. Would someone explain to me how I can fix this? I attached a screenshot and code snippets. I tried doing inline-block and float but still jacked things up. Should I position them using the x and y offsets or not? I just want to do this in the best and most organized way.
/*Font for logo*/
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
/* Add a black background color to the top navigation */
.topnav {
margin: 0;
position: relative;
background-color: #141414;
overflow: hidden;
text-align: center;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
/* Style the links inside the navigation bar */
.topnav a {
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
/*Style for website logo*/
.logo {
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
/*CSS style for the body*/
body {
margin: 0;
background-color: #262626; }
}
<!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>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class = "logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
Consider to use
display: grid;
in topnav selector, its common way to make navbar.
Sparate the nav size by giving `
grid-template-columns: 1fr 1fr 1fr;
also you need to wrap your nav bar links to single <div></div>.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
/* position: relative; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #141414;
/* overflow: hidden; */
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
/* position: relative; */
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
/* position: absolute; */
/* top: 50%; Important for vertical centered element */
/* transform: translateY(-50%); vertically centered */
color: white;
font-family: 'leander', sans-serif;
text-align: left;
/* float: left; */
}
<!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>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
</div>
<script src="app.js"></script>
</body>
</html>
the easy way to archive this result is to use either flex or grid.
you can for example add nav element to wrap Links something like
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<nav>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</nav>
and than in you CSS you can use flex to align element inside topnav like so
.topnav {
display: flex;
align-items:center;
justify-content: space-around;
}
align-items:center in this case will take of center elements in cross axis
Give position: absolute; to .logo.
Center the logo by adding top: 50%; transform: translateY(-50%); properties to .logo.
Rest of code was organized from start.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
position: relative;
background-color: #141414;
overflow: hidden;
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
position: relative;
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
position: absolute;
top: 50%; /*Important for vertical centered element*/
transform: translateY(-50%); /*vertically centered*/
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
<!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>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
In my social media icons project, I tried hiding my text using opacity 0. When a user will mouse hover on my tag or icons the text will be shown. but my hover transition doesn't work. Please at first try using opacity 1 in my CSS in .icon. enter image description here.Please solve my hovering problem. I can't understand what's the bug
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper>.icon_holder:nth-child(1)>a:hover .wrapper>.icon_holder:nth-child(1)>.icon{
opacity: 1;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
Please help me.
Your hover rule is wrong and won't trigger, replace it with:
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
Working example:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
you have an error on the CSS :
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
**transition: 0.4s;;**
opacity: 0;
}
There is an extra semicolon at the transition line, a small typo error..
I am working on a navigation bar, and I am stuck because my code won't work as attended. When on mobile (760px) I want my nav-bar to show 3 div classes as an icon for the 'pop up' menubar. I just can't figure out why it won't show up.
The code, CSS:
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
Code, HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links"
<ul>
<li>
Home
<li>
<li>
About
<li>
<li>
Work
<li>
<li>
Our Project
<li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
If anyone, can see the problem, it would be great if you could tell me.
I found the problem with the code. And it a simple mistake, but one I did not think would matter, or can't see why it worked. So if anyone can explain why this solved the issue, that would be great. Anyway, I moved the 'div burger class' to before the 'nav-links' in my HTML code. I am not sure why this fixed the issue, but it did. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com" rel='Stylesheet'>
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Project
</li>
</nav>
<script src="app.js"></script>
</body>
</html>
I can't figure out why it would matter to move the code, but I did in an attempt to see if that was the reason, and it was. If you can explain to me why this is the answer, that would be great.
Use Bootstrap for designs like this first.There is an error at the top of the css code you wrote, fix it.
body, *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
It has to be like this
I want to use different icons from different stylesheets as not all the icons are available in 1 stylesheet that I wanted to use. When I tryto do that it causes the height problem.One icon leaves in upside and leaves some bottom space and another icon looks as it is required to be. What can be done to align them with same height? if you see the height of last icon of font awesome left some bottom space...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
Change you footer to display as flex could solve the issue:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
/* float: left; */
display: flex; /* Consider flex layout */
color: black;
justify-content: center; /* Alignment of icons */
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
try this, added line-height and font-size to 'i' tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
text-decoration: none;
/*removed padding*/
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
/* added this */
.footer a i{
font-size: 24px;
line-height: 50px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
I am beginner and learning css.I have two questions.
I want to display text below icon box but it's coming right side of
each icon. what mistake am i doing?
I am using display flex,alignItem center, justify content in 3
classes(body ,wrapper, item). Looks like i'm repeating code. Can you suggest good practice?
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
.item:hover {
background-color: #F0F1F7;
transform: scale(1.3);
}
.icon {
padding: 10px;
border-radius: 50%;
background-color: rgb(105, 204, 211);
color: white;
}
.text{
padding-top:10px;
display: inline-flex;
vertical-align: middle;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="item">
<i class="icon material-icons">directions_bike</i>
<small class="text">Bicycle</small>
</div>
<div class="item">
<i class="icon material-icons">backup</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">email</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">airplanemode_active</i>
<small></small>
</div>
<div class="item">
<i class="icon material-icons">insert_chart</i>
<small></small>
</div>
</div>
</body>
</html>
I would suggest adding flex-direction: column; to your .item class.
.item {
width: 80px;
height: 80px;
margin: 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
cursor: pointer;
border-radius: 3px;
}
Here's a codepen: https://codepen.io/josh_minkler/pen/wvvZYeM
CSS tricks has a great guide to flexbox here