This question already has an answer here:
How can I draw a left pointing triangle using CSS?
(1 answer)
Closed 6 years ago.
I'm actually trying to implement a design done for me into HTML5 and CSS3 with Twitter Bootstrap.
I've got a sidebar on the left of the screen with a list inside, nothing complex.
<html>
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
</html>
I would like to arrive to this result :
Any idea on the CSS code to manage to have that triangle on the right side centered in the middle bottom right ?
You can achieve that triangle with a pseudo element ::after, some positioning and transforming:
li {
position: relative;
display: block;
background: #04a4a9;
padding: 1em;
overflow: hidden;
}
li a {
color: white;
text-decoration: none;
}
li::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
right: -8px;
top: 50%;
transform: translate(0, -50%) rotate(45deg);
}
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
You can achieve this using CSS pseudo elements:
To avoid wasting time with the triangle itself, just use a generator.
.btn {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: #53BED1;
color: #fff;
width: 400px;
height: 150px;
position: relative;
}
.btn::before {
right: 0;
top: 40%;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #ffffff transparent transparent;
}
<div class="btn">My users</div>
You may indeed use a pseudo.
You can also draw background-color of li from that pseudo via a box-shadow, so the triangle is translucide.
You can use color on li to easily change bg-colors since you reset color on <a>, box-shadow color inherits color value(currentcolor) if none set in the rule (so does border-color)..
li {
position: relative;
display: inline-block;
padding: 1em;
overflow: hidden;
color:tomato;
text-shadow:1px 1px black;
}
li:nth-child(even) {
color:turquoise
}
li.active {
color: #04a4a9;
}
li a {
color: white;
text-decoration: none;
position: relative;
z-index: 1;
}
li::after {
content: '';
position: absolute;
width:0px;
height: 15px;
margin: -8px;
right: 0;
top: 50%;
transform: rotate(45deg);
box-shadow: 0 0 0 400px;
}
li.active::after {
width:15px;;
}
/*demo to check if you can see through */
body {
background:linear-gradient(45deg,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue);
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="sidebar">
<ul class="sidebar-menu">
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed last year.
I have a basic type-writing element and I am having trouble centering it within a div. I have tried messing around with the margins, the position, the text alignment, all that. I honestly don't know what I'm doing so any help on this would be greatly appreciated.
This is my first time making a website so bear with me, I know this is probably a frequently asked question. I just couldn't find the answer on my own.
html {
background: #545972;
font-family: 'Roboto', sans-serif;
}
.nav {
float: left;
width: 15%;
height: 100vh;
}
.home {
float: left;
width: 85%;
height: 100vh;
}
section::after {
content: '';
display: table;
clear: both;
}
.nav nav h1 {
font-size: 40px;
margin-left: 30px;
position: relative;
}
.nav nav h1 a {
color: #fff;
text-decoration: none;
}
.nav nav ul {
margin-top: 60px;
line-height: 50px;
margin-left: 60px;
}
.nav nav ul li a {
text-decoration: none;
color: #fff;
font-weight: 700;
padding: 10px;
transition: color 0.5s;
}
.nav nav ul li a:hover {
color: rgb(206, 203, 203);
}
.nav nav ul li i {
color: rgb(27, 27, 31);
}
.vl {
border-left: 1px solid rgba(255, 255, 255, 0.25);
height: 100%;
position: absolute;
margin-left: 15%;
top: 0;
}
.home img {
position: absolute;
width: 128px;
height: 128px;
margin-left: 50%;
}
.home .typewriting {
margin: 0 auto;
}
.home .typewriting h1 a {
text-decoration: none;
color: #fff;
}
<section>
<div class="nav">
<nav>
<h1>Ryan</h1>
<ul class="fa-ul">
<li> <i class="fa-li fa fa-home" aria-hidden="true"></i> Home </li>
<li> <i class="fa-li fa fa-user" aria-hidden="true"></i> About </li>
<li> <i class="fa-li fa fa-briefcase" aria-hidden="true"></i> Services </li>
<li> <i class="fa-li fa fa-graduation-cap" aria-hidden="true"></i> Experience </li>
<li> <i class="fa-li fa fa-code" aria-hidden="true"></i> Projects </li>
<li> <i class="fa-li fa fa-comments" aria-hidden="true"></i> Contact </li>
</ul>
<div class="vl"></div>
</nav>
</div>
<div class="home">
<img src="images/logo.png">
<div class="typewriting">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Private Ryan" ]'>
<span class="wrap"></span>
</a>
</h1>
</div>
</div>
</section>
Add text-align: center on h1 element. Worked for me.
I believe that you are looking for the css property text-align. This property can position text center, left, right, or justify. For more information click here.
I appologize in advance if this is a silly question. I am trying to make a drop down over menu playing with css, I felt like I was close to success and I mess it all up.
At this point I am drowning in my css style sheet and I cannot find a way to make it work.
Basically, when trying to hover over a menu to get the drop down submenu, the next menu, does not push down to make space to the previous one'submenu, causing them to be both hovering (at least this is how I understand the issue).
I don't seem to find a way to keep the submenu stable when they get hovered over and the next menu to push down
I am hoping someone could point out what I am doing wrong with this css code
nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: '\f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li a:hover {
background: #B5B0B8;
padding-bottom: 15px;
position: relative;
}
nav#sidebar li a:hover i {
color: #060808;
display: block;
position: absolute;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
position: absolute;
min-width: 80px;
padding-bottom: 20px;
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
Home Dashboard
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<i class="icon-chart"></i>Sales Analytics
</li>
<li>
<i class="icon-chart"></i>Replenishment Analytics
</li>
<li>
<i class="icon-chart"></i>Items Analytics
</li>
<li>
<i class="icon-chart"></i>Supplier Analytics
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<i class="icon-padnote"></i>Record Sale
</li>
<li>
<i class="icon-padnote"></i>Sale history
</li>
<li>
<i class="icon-padnote"></i>Search sale
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<i class="icon-padnote"></i>Record Purchase
</li>
<li>
<i class="icon-padnote"></i>Purchase history
</li>
<li>
<i class="icon-padnote"></i>Search order
</li>
<li>
<i class="icon-padnote"></i>Supplier Replenishment
</li>
<li>
<i class="icon-padnote"></i>Item Replenishment
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<i class="icon-padnote"></i>Supplier Base
</li>
<li>
<i class="icon-padnote"></i>Item Base
</li>
</ul>
</li>
</ul></nav>
The problem here is really much more about the design and user experience than technical nature. Do you need your submenus to move, fade or anything like that? How does that affect the interaction with the user, who aims the cursor at something? I am afraid, this type of interactive, vertical menu is fundamentally flawed.
Below you can see an example of the code patched up just enough to work, and you can tell the unexpected behavior straight away. In short: a user's action must not change the very context the user is interacting with. In this case the context is the panels the user hovers over. Their positions must not change while the user is aiming.
The problem can be solved in multiple ways:
Static and fully expanded vertical menu
Sub-menu showing up on click and staying expanded (i.e. click to toggle)
Sub-menu being static and visible once the user has navigated to any page within that area (e.g. by clicking on one of the main points)
Horizontal menu
nav#sidebar {
width: 280px;
background: #FFFFFF;
color: #6a6c70;
border-right: 1px solid #34373d;
/* shrinked navbar */
}
nav#sidebar a {
color: inherit;
text-decoration: none;
position: relative;
}
nav#sidebar a[data-toggle="collapse"]::after {
content: '\f104';
display: inline-block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
position: absolute;
top: 50%;
right: 20px;
}
nav#sidebar a[aria-expanded="true"] {
background: #FFFFFF;
}
nav#sidebar a[aria-expanded="true"]::after {
content: '\f107';
}
nav#sidebar a i {
font-size: 1.2em;
margin-right: 10px;
-webkit-transition: none;
transition: none;
}
nav#sidebar .sidebar-header {
padding: 30px 20px;
}
nav#sidebar .sidebar-header h1,
nav#sidebar .sidebar-header p {
margin-bottom: 0;
}
nav#sidebar .sidebar-header h1 {
color: #8a8d93;
}
nav#sidebar .sidebar-header p {
font-size: 0.9rem;
}
nav#sidebar span.heading {
font-weight: 700;
margin-left: 20px;
color: #494d53;
font-size: 1.2rem;
margin-bottom: 15px;
}
nav#sidebar .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
background: none;
padding: 4px;
border: 3px solid #282b2f;
}
nav#sidebar ul {
max-height: none;
}
nav#sidebar li {
position: relative;
/* menu item */
/* submenu item */
/* menu item active */
/* submenu item active */
}
nav#sidebar li a {
padding: 18px 20px;
display: block;
font-weight: 400;
}
nav#sidebar li li {
overflow: hidden;
display: none;
}
nav#sidebar li:hover li {
height: 100%;
display: block;
}
nav#sidebar li a i {
margin-right: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
padding-right: 20px;
border-right: 1px solid #454649;
}
nav#sidebar li li a {
padding: 14px;
padding-left: 60px;
background: #FFFFFF;
}
nav#sidebar li li a:hover {
background: #B5B0B8;
display: block;
}
nav#sidebar li li a:hover i {
color: #060808;
}
nav#sidebar li::before {
content: '';
width: 2px;
height: 100%;
background: none;
display: none;
position: relative;
top: 0;
left: 0;
z-index: 99;
}
nav#sidebar li.active::before {
background: #060808;
}
nav#sidebar li.active > a {
background: #e93030e8;
color: #060808;
}
nav#sidebar li.active i {
color: #060808;
}
nav#sidebar li li.active > a {
background: #FFFFFF;
}
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div class="title">
<h1 class="h5">Analyse de Stock</h1>
<p>Bienvenue</p>
</div>
</div>
<!-- Sidebar Navigation Menus--><span class="heading">Menu</span>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-home"></i>
Home
</a>
<ul class="list-unstyled collapse" id="homeSubmenu" style="">
<li>
Home Dashboard
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<i class="fas fa-copy"></i>
Analytics
</a>
<ul class="list-unstyled collapse" id="pageSubmenu" style="">
<li>
<i class="icon-chart"></i>Sales Analytics
</li>
<li>
<i class="icon-chart"></i>Replenishment Analytics
</li>
<li>
<i class="icon-chart"></i>Items Analytics
</li>
<li>
<i class="icon-chart"></i>Supplier Analytics
</li>
</ul>
</li>
<li>
<a href="#page2Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Sales
</a>
<ul class="collapse list-unstyled" id="page2Submenu">
<li>
<i class="icon-padnote"></i>Record Sale
</li>
<li>
<i class="icon-padnote"></i>Sale history
</li>
<li>
<i class="icon-padnote"></i>Search sale
</li>
</ul>
</li>
<li>
<a href="#page3Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Orders
</a>
<ul class="collapse list-unstyled" id="page3Submenu">
<li>
<i class="icon-padnote"></i>Record Purchase
</li>
<li>
<i class="icon-padnote"></i>Purchase history
</li>
<li>
<i class="icon-padnote"></i>Search order
</li>
<li>
<i class="icon-padnote"></i>Supplier Replenishment
</li>
<li>
<i class="icon-padnote"></i>Item Replenishment
</li>
</ul>
</li>
<li>
<a href="#page4Submenu" data-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Bases
</a>
<ul class="collapse list-unstyled" id="page4Submenu">
<li>
<i class="icon-padnote"></i>Supplier Base
</li>
<li>
<i class="icon-padnote"></i>Item Base
</li>
</ul>
</li>
</ul></nav>
While looking at your code, it does seem to push down properly? It does seem a bit glitchy though. It might be another part of your html or css that is causing the problem.
demo gif
The easiest way to get elements to be shown is to use the :hover event which you ARE using, but you seem to be doing it with lists. Try using a simpler method maybe?
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
}
.hide {
display: none;
}
.main:hover + .hide {
display: block;
color: grey;
}
HTML:
<div class="main">
<p>Hover over me<p>
</div>
<div class="hide">
<p>Hello, World!</p>
</div>
I have a problem linking html(<li class="active"></li>) to icons and I do not know how to make icons different color after I click on them (color of an icon is black, when I click on an icon it does not stay white). I tried another way to get html in but then the animation did not work. I looked at millions of pages and I could not find an answer. On top of that, I am new to coding.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul
{
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li
{
list-style: none;
text-align: center;
display: block;
}
ul li:last-child
{
border-right: none;
}
ul li a
{
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon
{
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa
{
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .icon .fa:last-child
{
color: #eeeeee;
}
ul li a:hover .icon .fa
{
transform: translateY(-100%);
}
/*
ul li a .name
{
position: relative;
height: 20px;
width: 100%;
display: block;
overflow: hidden;
}
ul li a .name span
{
display: block;
position: relative;
color: #000;
font-size: 18px;
line-height: 20px;
transition: 0.5s;
}
ul li a .name span:before
{
content: attr(data-text);
position: absolute;
top: -100%;
left 0;
width: 100%;
height: 100%;
color: #eeeeee;
}
ul li a:hover .name span
{
transform: translateY(20px);
}
*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<ul>
<div>
<ul>
<li class="active"></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Home">Home</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="About">About</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Contact">Contact</span></div> -->
</a>
</li>
<div>
<ul>
<li></li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<!-- <div class="icon"><span data-text="Settings">Settings</span></div> -->
</a>
</li>
</ul>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I doubt you can solve this issue with a css-only solution - I might be wrong though.
Nevertheless you can do it with some Javascript trickery which goes a little like this:
layer an additional icon on top of your current icons, give it the desired color e.g. red and make it invisible by setting it's css opacity property to 0
attach a click event listener to the freshly created icons
inside the callback handler reset the opacity of all the red active icons to 0, reset the opacity of all the icons below (those that are used for the CSS animation effect) to 1, make the clicked icon visible and finally the two icons in the background invisible.
Here's an example (just click on 'Run code snippet'):
var buttons = document.getElementsByClassName("active");
buttons[0].addEventListener("click", clicked);
function clicked(e) {
var iconsToShow = document.querySelectorAll(`[class*="icon"]`);
iconsToShow.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.style.opacity = 1;
});
var iconsToHide = document.querySelectorAll(`[class*="active"]`);
iconsToHide.forEach(
function(currentValue, currentIndex, listObj) {
currentValue.firstElementChild.style.opacity = 0;
});
var iconToHide = e.target.parentElement.parentElement.querySelectorAll(`[class*="icon"]`)[0];
iconToHide.style.opacity = 0;
e.target.style.opacity = 1;
}
for (var a = 0; a < buttons.length; a++) {
buttons[a].addEventListener("click", clicked);
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #273847;
}
ul {
justify-content: center;
text-align: center;
min-width: 100%;
position: fixed;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 15px 0;
background: #2b3e4f;
display: flex;
border-radius: 10px;
}
ul li {
list-style: none;
text-align: center;
display: block;
}
ul li:last-child {
border-right: none;
}
ul li a {
text-decoration: none;
padding: 0 27px;
display: block;
}
ul li a .icon {
width: 40px;
height: 90px;
text-align: center;
overflow: hidden;
margin: 0 auto 10px;
}
ul li a .icon .fa {
width: 100%;
height: 100%;
line-height: 40px;
font-size: 40px;
transition: 0.5s;
color: #0a0e12;
}
ul li a .active .fa {
font-size: 40px;
transform: translateY(-250%);
color: #ff0e12;
opacity: 0;
}
ul li a .icon .fa:last-child {
color: #eeeeee;
}
ul li a:hover .icon .fa {
transform: translateY(-100%);
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<ul>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a class="button">
<div class="icon">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-tag" aria-hidden="true"></i>
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-tag" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</a>
</li>
<div>
<ul>
<li>
</li>
</ul>
</div>
<li>
<a>
<div class="icon">
<i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="active">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
</a>
</li>
</ul>
</body>
how to create a border bottom using pseudo selector ( :after) for this code
<li class="nav-list ">
<a href="#" class="nav-link mr-1">
<i class="fas fa-handshake"></i> loyalty Management
</a>
</li>
You can use code as below:
li{
position:relative;
}
.nav-list:after{
content: '';
position: absolute;
bottom: -4px;
height: 2px;
width: 100vh;
background: black;
left: 0;
}
<ul>
<li class="nav-list ">
<a href="#" class="nav-link mr-1">
<i class="fas fa-handshake"></i> loyalty Management
</a>
</li>
</ul>
Try this link Hope this Wil help Codepen
.nav-list {
position: relative;
list-style: none;
}
.nav-list a {
text-decoration: none;
font-size: 20px;
font-weight: 300;
color: #000000;
}
.nav-list a:after {
content: '';
position: absolute;
left: 30px;
bottom: -5px;
height: 2%;
width: 9%;
border-bottom: 2px solid #641F5E;
}
<li class="nav-list ">
<a href="#" class="nav-link mr-1">
<i class="fas fa-handshake"></i> loyalty Management
</a>
</li>
So I making a menu for a website, whenever the website loads the menu looks like img#1, the icons on the side are stacked, which I don't want to.
img1
After you hover over the icons they stack properly img#2.
after hovering
Which is how I actually want it.
I am sure it's just something small but I can't figure it out?
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right:auto;
padding-left:4%;
width:fit-content;
}
nav li {
display: inline;
padding-right:5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
.icon-nav{
margin-left:auto;
padding-right:4%;
}
.icon-nav a{
padding: 0 5%;
}
html
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</nav>
Your problem is likely related to a problem in your layout of .icon-nav and it's padding.
Some ways you can fix this is by:
Adding :not(:last-child) in the .icon-nav a CSS selector making it:
.icon-nav a:not(:last-child) {
padding: 0 5%;
}
OR
Adding:
First, adding width: 15%; to .icon-nav.
Second, sdding width: 75%; to .main-nav.
and adding a .icon-nav::before { content: ""; width: 15%; display: inline-block;}
/******* EXTRA *******/
#screen{
resize:horizontal;
overflow:hidden;
background-image: url('data:image/svg+xml;utf8, <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" ><rect x="0" y="0" width="10" height="10" fill="lightgrey"/><rect x="10" y="10" width="10" height="10" fill="lightgrey"/></svg>');
}
/*********************/
/********** Things forgotten **********/
html {
--main-bg-color: black;
--light-color: red;
--font-h: /*monospace*/
;
}
ul {
display: inline;
list-style-type: none;
}
#screen div {
display: inline-block;
height: 1em;
}
#screen div * {
border-width: 0;
}
/**************************************/
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right: auto;
padding-left: 4%;
width: fit-content;
/* ADDED { */ width: 70%; /* } */
}
nav li {
display: inline;
padding-right: 5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
/*= ADDED =======================*/
.icon-nav::before {
content: "";
width: 15%;
display: inline-block;
}
/*===============================*/
.icon-nav {
margin-left: auto;
padding-right: 4%;
/* ADDED {*/ width: 15%; /* } */
}
.icon-nav a {
padding: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="screen">
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
</div>
</nav>
</div>
</body>
</html>