I have following code which show popupmenu when click on icon on each block, right now for the third block the menu overflow the black container, I need to display inside the container by shifting the menu div towards left side. Only the last column menu need to shift left for keeping the position inside the container.
How it's possible?
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("edit-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
grid-gap: 10px;
justify-content: center;
align-content: flex-start;
margin: 0 auto;
margin-top: 0px;
text-align: center;
margin-top: 10px;
width: 508px;
background: black;
}
.grid_block {
background-color: #269ad3 !important;
color: #efefef;
border: 1px solid #ccc;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.edit-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.edit-dropdown-content a {
color: black;
padding: 5px 12px 5px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.w3-right {
float: right !important;
padding: 10px;
}
.w3-xlarge {
font-size: 25px;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu0" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu1" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu2" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu3" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
Here is the fiddle
https://jsfiddle.net/kvzbuLn9/
Possibly you can do this:
.w3-right {
position: relative;
}
#dropdown_menu3 {
bottom: 30px;
position: absolute;
}
EDIT: Use this code:
#dropdown_menu2{
position: absolute;
right: 10px;
}
Working example:
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("edit-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
grid-gap: 10px;
justify-content: center;
align-content: flex-start;
margin: 0 auto;
margin-top: 0px;
text-align: center;
margin-top: 10px;
width:508px;
background:black;
}
.grid_block {
background-color: #269ad3 !important;
color: #efefef;
border: 1px solid #ccc;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.edit-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.edit-dropdown-content a {
color: black;
padding: 5px 12px 5px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.w3-right {
float: right !important;
padding:10px;
}
.w3-xlarge{
font-size:25px;
}
.show {display: block;}
.w3-right {
position: relative;
}
#dropdown_menu3 {
bottom: 30px;
position: absolute;
}
#dropdown_menu2{
position: absolute;
right: 10px;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="pdf_parent_id" class="grid_container">
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu0" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu1" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu2" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu3" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
If your html is static and is not generated by some js code then you can use a straightforward approach - just add additional class to your menu container:
css:
.menu-icon-container {
position: relative;
}
.edit-dropdown-content--inside {
right: 23px;
top: 0;
}
html:
<div class="w3-right menu-icon-container">
<i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu2" class="edit-dropdown-content edit-dropdown-content--inside">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a>
</div>
</div>
You can add position: relative on the .grid-block so we can then add left: 30px on our dropdown. This should position them all to the left.
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("edit-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
grid-gap: 10px;
justify-content: center;
align-content: flex-start;
margin: 0 auto;
margin-top: 0px;
text-align: center;
margin-top: 10px;
width: 508px;
background: black;
}
.grid_block {
background-color: #269ad3 !important;
color: #efefef;
border: 1px solid #ccc;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
.edit-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
left: 30px;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.edit-dropdown-content a {
color: black;
padding: 5px 12px 5px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.w3-right {
float: right !important;
padding: 10px;
}
.w3-xlarge {
font-size: 25px;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu0" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu1" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu2" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu3" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
We can also use the nth-child selector to target only the one at the end of the row.
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("edit-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
grid-gap: 10px;
justify-content: center;
align-content: flex-start;
margin: 0 auto;
margin-top: 0px;
text-align: center;
margin-top: 10px;
width: 508px;
background: black;
}
.grid_block {
background-color: #269ad3 !important;
color: #efefef;
border: 1px solid #ccc;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
position: relative;
}
.edit-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
left: 120px;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.grid_block:nth-child(3n) .edit-dropdown-content {
left: 30px;
}
.edit-dropdown-content a {
color: black;
padding: 5px 12px 5px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 14px;
}
.w3-right {
float: right !important;
padding: 10px;
}
.w3-xlarge {
font-size: 25px;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="pdf_parent_id" class="grid_container">
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu0')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu0" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu1')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu1" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu2')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu2" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
<div class="grid_block">
<div>
<h5>Title</h5>
<i class="fa fa-file-pdf-o"></i>
<h6 style="font-size:12px;">Subtitle</h6>
<div class="w3-right">
<i onclick="myFunction('dropdown_menu3')" class="dropbtn fa fa-ellipsis-v w3-xlarge"></i>
<div id="dropdown_menu3" class="edit-dropdown-content">
<a class="contextMenu"><i class="fa fa-edit"></i> Menu1</a>
<a class="contextMenu"><i class="fa fa-download"></i> Menu2</a>
<a class="contextMenu"><i class="fa fa-share"></i> Menu3</a>
<a class="contextMenu"><i class="fa fa-trash"></i> Menu4</a></div>
</div>
</div>
</div>
Related
Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle
I want to put a background to my FA icons, but something like a low opacity circle around them.
Code:
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: white;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: #f5f5f5;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#"><i class="fa fa-codepen fa-3x"></i></a>
<a class="social my-github" target='_blank' href="#"><i class="fa fa-github fa-3x"></i></a>
<a class="social my-facebook" target='_blank' href="#"><i class="fa fa-facebook fa-3x"></i></a>
<a class="social my-fcc" target='_blank' href="#"><i class="fa fa-free-code-camp fa-3x"></i></a>
<a class="social my-linkedin" target='_blank' href="#"><i class="fa fa-linkedin fa-3x"></i></a>
<a class="social my-instagram" target='_blank' href="#"><i class="fa fa-instagram fa-3x"></i></a>
</div>
I've tried to change the "background" but it changes the whole square. I want only to give a circular background or a circular border around the icon itself.
Thanks to all!
You need to use stacked icons. I have modified your example for you below.
Code
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: black;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: black;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-codepen fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-github" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-facebook" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-fcc" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-linkedin" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-instagram" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
Jsfiddle Here
I am trying to get some space between my 4 fa-icons to spread them out more across the page. I'd like them to take up around 75% of the page. The HTML and accompanying CSS is shown below:
.fa-icons {
padding: 15px;
text-align: center;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
Just use margin like this:
.fa-stack {
margin-right: 10px; <-- change accordingly
}
Create a custom class name for the last div and add margin-right: 0; to prevent unwanted margin after that div.
You can simply add margin to the fas, see the following example:
.fa-icons {
padding: 15px;
text-align: center;
}
.fa-icons span {
margin: 0 20px;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
codepen
.fa-icons {
text-align: center;
width: 75%;
display: table;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.fa-icons>span{
display: table-cell;
vertical-align:top;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
I have been trying to center the Social media Icons for over an hour and I seem to go nowhere.
Below is the HTML code snippet.
<footer>
<div class="container">
<div class="row-footer">
<div class="row row-content">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
And below is the CSS code snippet.
.row-footer {
background-color: #AfAfAf;
margin:200px auto;
padding: 20px 0px 20px 0px;
}
.navbar-nav {
display: inline-block;
text-align: center;
}
This is how its appearing on Google Chrome.
Because you're using the navbar-nav class you have to remove it's default float:left rule.
.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
Working Example 1:
.row-footer {
background-color: #AfAfAf;
margin: 200px auto;
padding: 20px 0px 20px 0px;
}
div.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row-footer">
<div class="row">
<div class="nav navbar-nav">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
Working Example 2:
.row-footer {
background-color: #AfAfAf;
margin: 200px 0;
}
.footer-nav {
text-align: center;
padding: 40px 0;
}
.footer-nav a {
display: inline-block;
padding: 0 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row-footer">
<div class="footer-nav">
<a class="btn btn-social-icon btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="#">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-youtube" href="#">
<i class="fa fa-youtube"></i>
</a>
<a class="btn btn-social-icon" href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>
Try using display: inline-block; on the icon combined with text-align:center on icons container.
If there is going to be more children than just the icons, consider wrapping them into another <div>.
a {
display: inline-block;
}
.navbar-nav {
text-align: center;
}
Here is updated jsfiddle
I was try to set icons and text on images but it put extra space beside image, so how can i remove extra space from image?
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
overflow: hidden;
}
div {
height: 250px;
width: 250px;
display: inline;
}
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
first : your img tags are not correct. should be <img src="url">
second : display:inline generates white spaces between elements. so i suggest you use float:left instead
for example if you want 4 divs on one row, use float:left;width:25%; that way you are sure there are no white spaces between the divs
also to be sure the img covers all the width of the div, use width:100%;height:auto on the img. plus overflow:hidden on the img has no effect . you can use it on the div instead
see snippet below :
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
width:100%;
height:auto;
}
div {
height: 250px;
width: 250px;
float:left;
width:25%;
position:relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>