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>
Related
I have two css files
Say sidebar.css and topbar.css
When I link these in one html file, the properties get exchanged
Suppose if I specify the margin:0 to sidebar and margin:30px to topbar, the topbar gets placed at 0px too. And many other properties inside gets overridden etc. How should I overcome this and is there a way where I can link these codes in a html file individually without such problem? If not what changes should I make in the code.
I have a webpage containing nav elements and I've inserted a sidebar into the code which also consists some nav and other elements which makes alterations in my original webpage. When we link two css files ,how can we make 'em seperate and independent.
Here is my sidebar code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sidebar Menu with sub-menu</title>
<link rel="stylesheet" href="sidebarnewstyle.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="sidebarnewstyle.css"/> <!-- href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"-->
</head>
<body>
<div class="btn">
<span class="fas fa-bars"></span>
</div>
<nav class="sidebar">
<div class="text">
Side Menu
</div>
<ul>
<li class="active">Dashboard</li>
<li>
<a href="#" class="feat-btn">RESULT
<span class="fas fa-caret-down first"></span>
</a>
<ul class="feat-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>
<a href="#" class="serv-btn">Subject-wise
<span class="fas fa-caret-down second"></span>
</a>
<ul class="serv-show">
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
<li>IT</li>
</ul>
</li>
<li>Subject</li>
<li>Change Password</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<div class="header">
SYSTEM
<script >
$('.btn').click(function(){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.feat-btn').click(function(){
$('nav ul .feat-show').toggleClass("show");
$('nav ul .first').toggleClass("rotate");
});
$('.serv-btn').click(function(){
$('nav ul .serv-show').toggleClass("show1");
$('nav ul .second').toggleClass("rotate");
});
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
And this is the corresponding css file of sidebar
#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: 'Poppins', sans-serif;
z-index: 0;
}
.btn{
position: absolute;
top: 15px;
left: 45px;
height: 45px;
width: 45px;
text-align: center;
background: #1b1b1b;
border-radius: 3px;
cursor: pointer;
transition: left 0.4s ease;
}
.btn.click{
left: 260px;
}
.btn span{
color: white;
font-size: 28px;
line-height: 45px;
}
.btn.click span:before{
content: '\f00d';
}
.sidebar{
position: fixed;
width: 250px;
height: 100%;
left: -250px;
background: #1b1b1b;
transition: left 0.4s ease;
}
.sidebar.show{
left: 0px;
}
.sidebar .text{
color: white;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
background: #1e1e1e;
letter-spacing: 1px;
}
nav ul{
background: #1b1b1b;
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: white;
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: cyan;
background: #1e1e1e;
border-left-color: cyan;
}
nav ul li a:hover{
background: #1e1e1e;
}
nav ul ul{
position: static;
display: none;
}
nav ul .feat-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: #e6e6e6;
background: #1b1b1b;
border-left-color: transparent;
}
nav ul ul li a:hover{
color: cyan!important;
background: #1e1e1e!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);
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #202020;
z-index: -1;
text-align: center;
}
.content .header{
font-size: 45px;
font-weight: 600;
}
.content p{
font-size: 30px;
font-weight: 500;
}
And this is a topbar which also has nav and other css elements in its style sheet resulting overlapping etc.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NAv menu</title>
<link rel="stylesheet" type="text/css" href="topbarstyle.css">
</head>
<body>
<div class="navigation">
<nav>
I
II
III
IV
<div class="animation start-home">
</div>
</nav>
</div>
</body>
</html>
This is the code of topbar stylesheet
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap')
body {
font-family: 'Open Sans', sans-serif;
background: #2c3e50;
}
nav{
position: relative;
margin: 30px auto 0;
width: 420px;
height: 45px;
background: #000;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
nav a{
font-size: 15px;
color: white;
text-decoration: none;
line-height: 45px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
}
nav .animation{
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: #4dff4d;
border-radius: 8px;
transition: all .5s ease 0s;
}
a:nth-child(1){
width: 100px;
}
nav .start-home,a:nth-child(1):hover~.animation{
width: 100px;
left: 0;
}
a:nth-child(2){
width: 110px;
}
nav .start-II,a:nth-child(2):hover~.animation{
width: 110px;
left: 100px;
}
a:nth-child(3){
width: 100px;
}
nav .start-III,a:nth-child(3):hover~.animation{
width: 100px;
left: 210px;
}
a:nth-child(4){
width: 100px;
}
nav .start-IV,a:nth-child(4):hover~.animation{
width: 120px;
left: 300px;
}
I've tried z-index and position as fixed / absolute. But is there no other way to link these stylesheets seperately in a single html file.
When you link two css files, they are both loaded by the browser and interpreted as one big file, there is no way around it.
(note that this is how for instance css resets work: the first file will 'reset' all css to standardize it and then your css files come and are applied)
Since you have in both files a definition for nav the end result will be a combination of both definitions, with the last one taking precedence.
The only way I see around this is to actually use classes instead of elements as selectors.
I made a simple dropdown menu.When I hover "Social Media" section ,I want to show some social icon like a dropdown menu.I made those social media icon part hidden . And I want to make it visible only during to hover on "social media" part.But it is not working.The icon part is not shown after hover.Please help me out.I couldn't not be able to find my problem.
Html
<!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>Menu</title>
<link rel="stylesheet" href="./menu.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-menu">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
<li>Register</li>
</ul>
</div>
<div class="social">
<ul>
<li>Social Media
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.main-menu{
background: black;
}
.main-menu ul {
text-align: center;
}
.main-menu ul li {
display: inline-block;
position: relative;
}
.main-menu ul li a {
color: white;
text-decoration: none;
padding: 15px 56px;
margin-left: -5px;
border-left:1px rgb(70, 67, 67) solid;
display: inline-block;
font-family: 'Lato', sans-serif;
}
.main-menu ul li :last-child{
border-right:1px rgb(70, 67, 67) solid;
}
.main-menu ul li:hover>a{
background-color: rgb(70, 67, 67);
transition: .5s;
}
/* dropdown menu*/
.main-menu ul li ul{
position: absolute;
left: -4px;
top:100%;
width: 300px;
background: black;
visibility: hidden;
opacity: 0;
transform: scaley(0);
transform-origin: top;
}
.main-menu ul li ul li{
display: block;
padding-left: 5px;
}
.main-menu ul li ul li a{
display: block;
border:none;
border-bottom: 1px solid rgb(70, 67, 67);
}
.main-menu ul li ul li:last-child{
border-right: none;
}
/* hover style */
.main-menu ul li:hover ul{
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaley(1);
}
/* social media */
.social{
text-align: center;
margin-top: 50px;
}
.social ul{
list-style: none;
display: inline-block;
}
.social ul li{
height: 42px;
width:225px;
background-color: black;
border-radius: 35px;
position: relative;
}
.social ul li a{
text-decoration: none;
color: white;
font-family: 'Lato', sans-serif;
font-size: 35px;
}
.social ul li:hover{
background-color: rgb(114, 114, 114);
transition: .5s;
}
/* dropdown */
.social ul li ul{
position: absolute;
top: 140%;
left: -145px;
width: 500px;
visibility: hidden;
opacity: 0;
}
.social ul li ul li{
display: inline-block;
height: 80px;
width: 80px;
line-height: 80px;
border-radius: 50%;
margin-left: 22px;
}
.social ul li ul li a{
font-size: 45px;
color: white;
padding:0px;
}
/* hover */
.social ul li :hover .social ul li ul{
visibility: visible;
opacity: 1;
}
Here you go. You were using hover part as .social ul li:hover .social ul li ul whereas it should be like .social:hover ul li ul
* {
margin: 0;
padding: 0;
}
.main-menu {
background: black;
}
.main-menu ul {
text-align: center;
}
.main-menu ul li {
display: inline-block;
position: relative;
}
.main-menu ul li a {
color: white;
text-decoration: none;
padding: 15px 56px;
margin-left: -5px;
border-left: 1px rgb(70, 67, 67) solid;
display: inline-block;
font-family: 'Lato', sans-serif;
}
.main-menu ul li :last-child {
border-right: 1px rgb(70, 67, 67) solid;
}
.main-menu ul li:hover>a {
background-color: rgb(70, 67, 67);
transition: .5s;
}
/* dropdown menu*/
.main-menu ul li ul {
position: absolute;
left: -4px;
top: 100%;
width: 300px;
background: black;
visibility: hidden;
opacity: 0;
transform: scaley(0);
transform-origin: top;
}
.main-menu ul li ul li {
display: block;
padding-left: 5px;
}
.main-menu ul li ul li a {
display: block;
border: none;
border-bottom: 1px solid rgb(70, 67, 67);
}
.main-menu ul li ul li:last-child {
border-right: none;
}
/* hover style */
.main-menu ul li:hover ul {
visibility: visible;
opacity: 1;
transition: .5s;
transform: scaley(1);
}
/* social media */
.social {
text-align: center;
margin-top: 50px;
}
.social ul {
list-style: none;
display: inline-block;
}
.social ul li {
height: 42px;
width: 225px;
background-color: black;
border-radius: 35px;
position: relative;
}
.social ul li a {
text-decoration: none;
color: white;
font-family: 'Lato', sans-serif;
font-size: 35px;
}
.social ul li:hover {
background-color: rgb(114, 114, 114);
transition: .5s;
}
/* dropdown */
.social ul li ul {
position: absolute;
top: 140%;
left: -145px;
width: 500px;
visibility: hidden;
opacity: 0;
}
.social ul li ul li {
display: inline-block;
height: 80px;
width: 80px;
line-height: 80px;
border-radius: 50%;
margin-left: 22px;
}
.social ul li ul li a {
font-size: 45px;
color: white;
padding: 0px;
}
/* hover */
.social:hover ul li ul {
visibility: visible;
opacity: 1;
}
<div class="main-menu">
<ul>
<li>Home
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>About</li>
<li>Service</li>
<li>Contact</li>
<li>Register</li>
</ul>
</div>
<div class="social">
<ul>
<li>Social Media
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</li>
</ul>
</div>
Working Fiddle
Change you last css selector with this
/* hover */
.social:hover ul li ul{
visibility: visible;
opacity: 1;
}
Although you will now run into the problem that you cant click the icons since they have position: absolute; if you try to hover over them the hover on .social will get removed
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'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
http://codepen.io/DerekDev/pen/qEwPzd
When you hover on the icons on this menu, you will notice that pseudo elements below it, but for some of them, they aren't centered. Any ideas on how I can center? Thanks.
.nav a:hover:after {
display:block;
}
.nav a.forums:hover:after {
display:block;
}
.nav a:after {
display:none;
background-color:#000000;
content:"Home";
position:absolute;
font-family:'Lato', sans-serif;
text-transform:uppercase;
padding:5px;
top:75%;
border-radius:5px;
}
.nav a.home:after {
content:"Home";
}
.nav a.forums:after {
content:"Forum";
}
.nav a.shop:after {
content:"Shop";
}
.nav a.vote:after {
content:"Vote";
}
Giving li a width gives you somewhere for the :after to adjust to - since those elements don't really go in the dom.
#import url(http://fonts.googleapis.com/css?family=Lato);
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 75px;
background-color: #2a2a2a;
}
.nav ul {
position: relative;
margin-top: -.75em !important;
min-width: 25%;
float: right;
}
.nav li {
list-style: none;
float: left;
margin: 30px 10px;
width: 80px;
text-align: center;
display: block;
}
.nav a {
color: #ffffff;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: block;
position: relative;
}
.nav a:hover:after {
display: block;
}
.nav a.forums:hover:after {
display: block;
}
.nav a:after {
display: none;
background-color: #000000;
content: "Home";
position: absolute;
text-align: center;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
padding: 5px;
top: 100%;
height: 20px;
right: 0;
left: 0;
border-radius: 5px;
}
.nav a.home:after {
content: "Home";
}
.nav a.forums:after {
content: "Forum";
}
.nav a.shop:after {
content: "Shop";
}
.nav a.vote:after {
content: "Vote";
}
.nav i {
font-size: 250%;
text-align: center;
position: relative;
background: -webkit-linear-gradient(top, #ffffff, #909090);
background: linear-gradient(top, #909090, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 300ms;
}
.nav a:hover > i {
background: -webkit-linear-gradient(top, #909090, #ffffff);
background: linear-gradient(top, #909090, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="nav">
<ul>
<li><a class="home" href="/home"><i class="fa fa-home"></i></a>
</li>
<li><a class="forums" href="/home"><i class="fa fa-book"></i></a>
</li>
<li><a class="shop" href="/home"><i class="fa fa-shopping-cart"></i></a>
</li>
<li><a class="vote" href="/home"><i class="fa fa-check"></i></a>
</li>
</ul>
</div>