I want the website to open the link after pressing the button, and not like it is now that I have to press the icon to open the link. I have to click on the small icon for the link to open and I want to make this link open as if you press the button
and if someone would like it, here are nice transitions, maybe someone will be useful
li {
display: block;
float: left;
}
nav ul {
list-style-type: none;
}
nav li {
width: 30px;
height: 30px;
text-align: center;
position: relative;
transition: 0.3s;
margin: 3rem;
}
nav li::before,
nav li::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transition: 0.3s;
}
nav li::before {
background-color: white;
z-index: -1;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
background-color: #66CCFF;
transform: translate(1.5rem, 1.5rem);
z-index: -2;
}
nav li:hover {
transform: translate(1.5rem, 1.5rem);
color: white;
}
nav li:hover::before {
background-color: #66CCFF;
}
nav li:hover::after {
background-color: white;
transform: translate(-1.5rem, -1.5rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</nav>
You should create a button and do this, and if its not what u want then please explain your question
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title></title>
</head>
<body>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-instagram"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-twitter"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-github"><button type="button" name="button">Fb</button></i></li>
</ul>
</nav>
</body>
</html>
I already know. I thought you can't give a href out of the list, but you can
<li><i class="fa fa-github"></i></li>
Try adding this style. This basically expands your anchor to occupy the full <li> size.
nav li a {
height: 100%;
display: block;
}
Full previewable code:
li {
display: block;
float: left;
}
nav ul {
list-style-type: none;
}
nav li {
width: 30px;
height: 30px;
text-align: center;
position: relative;
transition: 0.3s;
margin: 3rem;
}
nav li::before,
nav li::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transition: 0.3s;
}
nav li::before {
background-color: white;
z-index: -1;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
background-color: #66CCFF;
transform: translate(1.5rem, 1.5rem);
z-index: -2;
}
nav li:hover {
transform: translate(1.5rem, 1.5rem);
color: white;
}
nav li:hover::before {
background-color: #66CCFF;
}
nav li:hover::after {
background-color: white;
transform: translate(-1.5rem, -1.5rem);
}
nav li a {
height: 100%;
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</nav>
Related
I've created a fixed side nav bar and header and i'd like to create a grid within the content section of the page, however, when i add in any main content, it pushes below the fixed side bar and does not show from just below the header.
I've been scrolling through stack and google to see if i can fix the issue, but none of though solutions has worked.
I've made a code pen for visuals and seeing the code:
https://codepen.io/nyxerian/pen/ZEBKMJg
As you'll see the h2 title should be in line with the Home button at the top of the screen.
What am I missing?
HTML
<!DOCTYPE html>
>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="basic.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
</head>
<body>
<!-- start: SIDEBAR NAV AND HEADER -->
<div class='fixed header'></div>
<div class='fixed side'>
<img class="smartlogo" src="PNG1.png" alt="smart">
<nav class="sidebar">
<div class="text"></div>
<br>
<ul>
<li class="active"><i class="fas fa-home" style="color:#2DAAD6;"></i> Home</li>
<li><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i> Sell</li>
<li><i class="fas fa-chart-line" style="color: #2DAAD6;"></i> Dashboards</li>
<li><i class="fas fa-boxes" style="color: #2DAAD6;"></i> Inventory</li>
<li><i class="far fa-credit-card" style="color: #2DAAD6;"></i> Payments</li>
<li>
<i class="far fa-folder-open" style="color: #2DAAD6;"></i> Leads
<ul class="lead-show">
<li>Referrals</li>
<li></i>Management</li>
<li>Settings</li>
</ul>
</li>
<li><i class="fas fa-users" style="color: #2DAAD6;"></i> Teams</li>
<li><i class="far fa-clipboard" style="color: #2DAAD6;"></i> Reporting</li>
<li><i class="fas fa-tools" style="color: #2DAAD6;"></i> Settings</li>
</ul>
</nav>
</div>
<div class='scrollable'></div>
<script>
$('.lead-btn').click(function () {
$('nav ul .lead-show').toggleClass('show')
$('nav ul .first').toggleClass('rotate')
})
$('nav ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Nordstern', Helvetica;
}
.scrollable {
height: 2000px;
width: 500%;
margin: 0 auto;
}
.fixed {
position: fixed;
}
.header {
top: 0;
left: 0;
right: 0;
height: 100px;
background-image: linear-gradient(
to right,
#436c89,
#6ca1cd,
#60b9c0
) !important;
}
.smartlogo {
width: 140px;
height: 45px;
margin-left: 40px;
margin-top: 30px;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 240px;
background-color: #e7e6e6;
}
.sidebar {
height: 80%;
width: 240px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e7e6e6;
margin-top: 85px;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: black;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
justify-content: left;
background: #e7e6e6;
letter-spacing: 1px;
}
nav ul {
background: #e7e6e6;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: black;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: black;
background: #e7e6e6;
border-left-color: #60b9c0;
}
nav ul li a:hover {
background: #ffffff;
}
nav ul ul {
position: static;
display: none;
}
nav ul .lead-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: Black;
background: #e7e6e6;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: black !important;
background: #ffffff !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
i {
display: inline-block;
margin-right: 15px;
}
I am using fa fa icons in
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title> Ring Games </title>
</head>
<body>
<div class="div">
<ul>
<li> <i class="fa fa-facebook-official" > Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users </i></l1>
<script src="https://use.fontawesome.com/73dc7d73e2.js"></script>
</ul>
</div>
<style>
.div ul {
position: absolute;
margin: 0;
padding: 0;
bottom: 10px;
display: flex;
justify-content: center;
width: 100%;
list-style: none;
text-decoration: none;
}
}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
line-spaceing: 10px;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
line-height: 1000px;
}
</style>
</body>
It shows but then they're touching each other Is it possible to make 2 tags bellow each other? Because it doesn't work for me
I am using
Url:
https://fontawesome.com/v4.7.0/icons/ font awsome
Thank you,
Ring Games
If I understood your requirement correctly is this what you need?
.div {
display: flex;
flex-direction: column;
}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
}
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<div class="div">
<ul>
<li> <i class="fa fa-facebook-official"> Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users</i></li>
</ul>
</div>
Why is my social media icons not showing in my footer? Need help finding out why my social media icons are not appearing in my footer.
Instead the social media icons is appearing in the center of the page so it seems like the position has jumped out of the doc.
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
ul{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Try this, Hope this help thank you
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
.box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
ul{
display: flex;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) */
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
I'm tying to get a ul to drop down a few link icons, but no matter what I type, the only thing that changes is the orientation of the icons. I feel like I'm missing something rather simple, but nor Google or Foundation's website have helped. I've tried calling to the nested ul using .menu li a i {}, but that's wrong. I've tried other ways as well with no positive results.
/* Styles go here */
.menu-hover-lines {
margin-top: 30px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: #333;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li.active>a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
.menu li a>i {
display: none;
}
.menu i:hover {
display: inline;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">
<li>
Get in touch
<ul class="menu">
<li>
<a href="#">
<i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
</a>
</li>
<li>
<a href="http://twitter.com">
<i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
</a>
</li>
<li>
<a href="http://instagram.com">
<i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
</a>
</li>
</ul>
</li>
</ul>
you have to add a div to the outside of all your content for the hover effect
/* Styles go here */
.menu-hover-lines {
margin-top: 30px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: #333;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li.active>a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
ul .menu {
display: none;
}
.drop_down:hover ul .menu{
display: inline;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="drop_down">
<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">
<li>
Get in touch
<ul class="menu">
<li class="content">
<a href="#">
<i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
</a>
</li>
<li class="content">
<a href="http://twitter.com">
<i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
</a>
</li>
<li class="content">
<a href="http://instagram.com">
<i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
For some reason I can't get my last nav link to stay with the rest of them. I can do this if i set .dropdown ul li .menu position to absolute, but then the drop down links are pushed to the right and not centered. Padding-right nor margin-right doesn't resolve this issue.
JSFiddle
Before
After
Position: Absolute
.title {
font-family: 'Philosopher', sans-serif;
margin-left: 20px;
color: white;
float: left;
padding-right: 70px;
padding-top: 5px;
}
#body {
background-color: black;
}
.dropdown ul {
padding-top: 10px;
}
.dropdown ul li .menu {
position: absolute;
float: none;
}
.menu-hover-lines {
margin-top: 35px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: white;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li:first-child a {
margin-left: 10px;
}
.menu-hover-lines li.active > a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
/* Nav text settings on hover*/
.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
color: #8e8e8e;
transition: all 0.40s ease;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
.dropdown li .menu {
display: none;
}
.dropdown li:hover .menu {
display: inline-block;
float: none;
}
<!-- Nav Bar -->
<div class="dropdown" >
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li >Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>
I think you need to add left:0 and top:100% to your dropdown-menu with position:absolute. Remember to add position:relative to your .menu>li...
I have added .dropdown-menu class in the dropdown ul...
Also I noticed that you have written float: right, bottom in your css which is not valid...
Stack Snippet
body {
font: 13px Verdana;
}
.menu {
padding: 0;
display: flex;
}
.menu>li {
margin: 0 10px;
list-style: none;
position: relative;
}
.menu li a {}
.dropdown-menu {
padding: 0;
position: absolute;
top: 100%;
left: 0;
border: 1px solid;
padding: 10px;
}
.dropdown-menu>li {
list-style: none;
}
<!-- Nav Bar -->
<div class="dropdown">
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li>Collections
<ul class="dropdown-menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>