I have a five list social share button which is click to expend right side, the social icon not visible when expend I need social icon in list left to right after expend the function and when expending social share icon will rotate, I have attached image for reference, please check. Thanks in advance
.social-share-overlay a.overlay-button {
color: #328487;
text-decoration: none;
display: block;
width: 30px;
height: 30px;
line-height: 50px;
border-radius: 5px;
overflow: hidden;
margin: 10px;
transition: all 0.2s ease 0s;
}
.social-share-overlay a.overlay-button i {
padding-right: 10px;
display: block;
}
.social-share-overlay a.overlay-button p {
display: none;
}
.social-share-overlay a.overlay-button:hover {
width: 190px;
opacity: 1;
transition: all 0.2s ease 0s;
}
.social-share-overlay a.overlay-button:hover p {
display: inline;
}
.social-share-overlay a.overlay-button.facebook {
background-color: #ffffff;
border: 1px solid #dfdfdf;
border-radius: 50px;
padding: 9px 10px;
display: flex;
}
.social-share-overlay a.overlay-button.facebook li i {
background-color: #ffffff;
border: 1px solid #dfdfdf;
}
<div class="wrapper-s">
<div class="social-share-overlay">
<a class="overlay-button facebook" href="">
<i class="fa fa-share-alt" aria-hidden="true"></i>
<li><i class="fa fa-facebook-square" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
</a>
</div>
</div>
Related
first time posting a question here, hope someone can help!
I want to create a list of social media icon/links
<div class="social-links">
<ul>
<li class="m-link">
<i class="far fa-envelope"></i>
</li>
<li class="m-link">
<i class="fab fa-linkedin-in"></i>
</li>
<li class="m-link">
<i class="far fa-address-card"></i>
</li>
</ul>
</div>
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
My problem is that in this way the hover color doesn't apply on the icon/link, I tried to add an extra hover just for the ".m-link a" like so..
.m-link a:hover {
color: #0b0a08;
}
but in this way the color apply only when my cursor is on the link and not when I hover on the list element.
Still a beginner here, someone help pleaseeee!!
You need to target the element inside the element on hover, like this
.m-link:hover a > i { /* 'on hover on .m-link class element, then i inside a will take this css code */
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link {
width: 2em;
height: 2em;
text-align: center;
list-style: none;
margin: 10px 30px;
display: inline-block;
font-size: 2.5em;
line-height: 2em;
color: #e2e2e2;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.m-link:hover a > i {
background-color: #e2e2e2;
color: #0b0a08;
box-shadow: 0 0 15px #9ecaed;
}
.m-link a {
text-decoration: none;
color: #e2e2e2;
}
<script src="https://kit.fontawesome.com/9114d9acc8.js" crossorigin="anonymous"></script>
<div class="social-links">
<ul>
<li class="m-link">
<i class="far fa-envelope"></i>
</li>
<li class="m-link">
<i class="fab fa-linkedin-in"></i>
</li>
<li class="m-link">
<i class="far fa-address-card"></i>
</li>
</ul>
</div>
I am nearly done with this webpage and have some list items, but the li tags aren't inheriting the parent font. I have tried multiple ways to resolve it including using the ul and li tags to add inherit styling, but still no change. I've posted the code below. Thanks as always!
.section-plans {
background-color: #f4f4f4;
}
ul {
list-style: none;
}
.plan-box {
background-color: #fff;
border-radius: 5px;
width: 90%;
margin-left: 5%;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}
.residential {
font-size: 300%;
margin-bottom: 10px;
}
<div class="col span 1-of-3">
<div class="plan-box">
<div>
<h3>Commercial</h3>
<p class="residential"></p>
<ul>
<li><i class="far fa-check-circle">Clean & Disinfect</i></li>
<li><i class="far fa-check-circle">Emptry trash bins</i></li>
<li><i class="far fa-check-circle">Sweep & mop floor</i></li>
<li><i class="far fa-check-circle">Vaccum carpets & upholstry</i></li>
<li><i class="far fa-check-circle">Thoroughly wipe down handles & doors</i></li>
<li><i class="far fa-check-circle">Smudge free windown wipedown</i></li>
</ul>
</div>
<div>
Sign up now
</div>
Need to change in i tag close it before li text start instead of close end of the li text. Run code snippet
.section-plans {
background-color: #f4f4f4;
}
ul {
list-style: none;
}
.plan-box {
background-color: #fff;
border-radius: 5px;
width: 90%;
margin-left: 5%;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}
.residential {
font-size: 300%;
margin-bottom: 10px;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="col span 1-of-3">
<div class="plan-box">
<div>
<h3>Commercial</h3>
<p class="residential"></p>
<ul>
<li><i class="far fa-check-circle"></i> Clean & Disinfect</li>
<li><i class="far fa-check-circle"></i> Emptry trash bins </li>
<li><i class="far fa-check-circle"></i> Sweep & mop floor </li>
<li><i class="far fa-check-circle"></i> Vaccum carpets & upholstry </li>
<li><i class="far fa-check-circle"></i> Thoroughly wipe down handles & doors </li>
<li><i class="far fa-check-circle"></i> Smudge free windown wipedown </li>
</ul>
</div>
<div>
Sign up now
</div>
this because your i tag , you can fix it with add this line to your css
ul li i {
font-style: normal;
}
I am trying to make the color of the side bar. when I try to make the browser window small the color at the bottom left is like a faded black and white and I am trying to make the scrollbar hidden but still can scroll and also looking a CSS code that can make the word steady when I close and open my side navigation menu.
Thank you for helping me in advance.
enter image description here
my css code
.contentnav{
height: 100%;
color: rgba(255,255,255,1);
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
padding-top: 50px;
transition: left 0.3s linear;
width: 50px;
display: block;
}
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
.contentnav ul li ul{
display: none;
}
.contentnav ul i{
margin-left: 10px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #000;
padding: 5px;
width: 25px;
padding-bottom: 8px;
cursor: pointer;
vertical-align:middle;
}
.contentnav ul{
list-style: none;
margin:0px;
padding:0px;
}
.contentnav ul span{
position: absolute;
margin-left: 21px;
cursor: pointer;
margin-top: 5px;
float: left;
}
.contentnav i:hover{
color: rgba(0,204,102,1);
}
my html code
<div class="contentnav" id="contentmenu">
<ul>
<li>
<i class="fas fa-home"></i>
<span id="same" class="nav-text">Home</span>
</li>
<li>
<i class="fas fa-book"></i>
<span id="same" class="nav-text">L</span>
<ul>
<li>-Bo</li>
<li>-B</li>
<li>-R</li>
<li>-E</li>
<li>-P</li>
</ul>
</li>
<li>
<i class="fas fa-hourglass-half"></i>
<span id="same" class="nav-text">Online</span>
</li>
<li>
<i class="fas fa-bookmark"></i>
<span id="same" class="nav-text">E</span>
<ul>
<li>-S</li>
<li>-Fee</li>
</ul>
</li>
<li>
<i class="fas fa-file-alt"></i>
<span id="same" class="nav-text">C</span>
</li>
<li>
<i class="fas fa-clipboard"></i>
<span id="same" class="nav-text">G</span>
</li>
<li>
<i class="fas fa-info-circle"></i>
<span id="same" class="nav-text">Announcement</span>
</li>
<li>
<i class="far fa-calendar-alt"></i>
<span id="same" class="nav-text">Calendar</span>
</li>
<li>
<i class="fab fa-hire-a-helper"></i>
<span id="same" class="nav-text">Guides</span>
</li>
<li>
<i class="fas fa-sign-out-alt"></i>
<span id="same" class="nav-text">Logout</span>
</li>
</ul>
</div>
I think this should do the trick.
Remove this and
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
Replace it with this.
.contentnav::-webkit-scrollbar-button
{
display: block;
height: 13px;
border-radius: 0px;
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-button:hover
{
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-thumb
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-thumb:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-track
{
background-color: #efefef;
}
.contentnav::-webkit-scrollbar-track:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar
{
width: 15px;
}
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>
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;}