<li> hover effect, pretty sure it's something to do with :after

<li> hover effect, pretty sure it's something to do with :after - html

I have an UL menu, I want to animate a line underneath a LI when hovered, I'm trying to start with this:
.menu-container li:after {
content: "";
width: 0px;
height: 4px;
position: absolute;
bottom: 0;
left: 0;
display: block;
z-index: 2;
background: #fff;
-webkit-transition: width 0.3s;
transition: width 0.3s;
}
a:hover .menu-container li:after {
width: 100%;
}
<div class="menu-container">
<ul>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Food & Farming</li>
</a>
<a href="#">
<li>Cookbook</li>
</a>
<a href="#">
<li>Schools</li>
</a>
<a href="#">
<li>Get Involved</li>
</a>
</ul>
</div>
It's not working though...
Any help on this would be awesome!!
Cheers

try this
.menu-container li:after {
content: "";
width: 0px;
height: 4px;
bottom: 0;
/* position: absolute; remove */
left: 0;
display: block;
z-index: 2;
background: #fff;
-webkit-transition: width 0.3s;
transition: width 0.3s;
width: 0%;
/* add */
background: red;
/* add */
}
.menu-container a:hover li:after {
/* change */
width: 100%;
}
<div class="menu-container">
<ul>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Food & Farming</li>
</a>
<a href="#">
<li>Cookbook</li>
</a>
<a href="#">
<li>Schools</li>
</a>
<a href="#">
<li>Get Involved</li>
</a>
</ul>
</div>

Is this what you are looking for??
<html>
<head>
<style type="text/css">
.menu-container li:after {
content: "";
width: 0px;
height: 4px;
position: absolute;
bottom: 0;
left: 0;
display: block;
z-index: 2;
background: #fff;
-webkit-transition: width 0.3s;
transition: width 0.3s;
}
a:hover .menu-container li:after {
width: 100%;
}
.menu-container a {
text-decoration: none;
}
.menu-container a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="menu-container">
<ul>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Food & Farming</li>
</a>
<a href="#">
<li>Cookbook</li>
</a>
<a href="#">
<li>Schools</li>
</a>
<a href="#">
<li>Get Involved</li>
</a>
</ul>
</div>
</body>
</html>

Try targeting it with .menu-container li:hover a:after {} or .menu-container li a:hover:after {}

Related

Hover dropdown menu out of screen

.sidebar-left .dropdown {
position: static;
}
.sidebar-left .dropdown .dropdown-menu {
position: absolute;
z-index: 10;
display: none;
}
.sidebar-left .dropdown:hover .dropdown-menu{
position: absolute;
display: block;
left: 63px;
transform: translateY(-50px);
}
.sidebar-left .dropdown:hover > .dropdown-menu{
display: block;
}
.sidebar-left.open .dropdown:hover .dropdown-menu{
position: absolute;
display: block;
left: 273px;
}
.sidebar-left.open li[aria-expanded="true"]:hover > .dropdown-menu{
display: none;
}
.sidebar-left.open .dropdown:hover > .dropdown-menu{
display: block;
}
.dropdown-menu{
position: absolute;
padding-top: 0;
padding-bottom: 0;
box-shadow: 2px 2px 2px 2px #222;
background-color: #4c5569;
border-radius: 1px;
}
.dropdown-menu li{
margin-top: 0;
margin-bottom: 0;
padding: 15px 25px;
min-width: 175px;
}
.dropdown-menu li a span {
font-size: .8rem;
line-height: 1rem;
color: #fff;
text-decoration: none;
}
.dropdown-menu li:hover {
background-color: rgba(255,255,255,.05);
}
<div class="sidebar-left" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-title">Navigation</div>
<div class="sidebar-collapse" id="sidebar-collapse" data-bind="click: toggleOpen">
<i class="fa-solid fa-bars" ></i>
</div>
</div>
<div class="sidebar">
<div class="sidebar-content">
<nav class="sidebar_nav" role="navigation">
<ul id=sidebar-accordion class="sidebar_nav-main" data-bind="foreach: {data:items}">
<li class="sidebar-link dropdown" data-bind="css: {'active': $data.isActive() ? true : false}, attr: { 'data-target': '#collapse' + $index(), 'aria-expanded': false, 'data-toggle': 'collapse' } ">
<a href="javascript:void(0)" data-bind="attr: {'href': $data.parent_link}" class="sidebar_main-link">
<i data-bind="class: $data.icon"><i data-bind="class: $data.icon2"></i></i>
<span class="sidebar-item" data-bind="text: name"></span>
</a>
<ul class="dropdown-menu sidebar_submenu" data-bind="foreach: $data.children">
<li class="dropdown-item sidebar_submenu-item" data-bind="class: $data.className">
<span data-bind="text: name"></span>
</li>
</ul>
<div class="sidebar-subchild" id="sidebar-subchild" onclick="event.stopPropagation()">
<ul data-parent="#sidebar-accordion" class="collapse sidebar_submenu" data-bind="attr: { id: 'collapse' + $index()}, foreach: $data.children">
<li class="sidebar_submenu-item" data-bind="class: $data.isSelectModule">
<a target="_self" data-bind="attr: { 'href' : $data.link}"><span data-bind="text: $data.name"></span></a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
Good Day, I am facing some problem in my hover dropdown submenu, if in the full size of browser, the submenu item of my last menu is only show two items but actually there have 5 items. How can I make the submenu showing upward to prevent the items be hidden? Also if I smaller the browser screen, the submenu also will be hidden from browser. I was using bottom: cal() before, but the position of submenu also will crashed. Is there any better solution?

Can't add the second two lines for hamburger menu

I am trying to make a hamburger menu using some code I got from Youtube.
Everything is working but I can't add the second two lines for the hamburger menu.
I used the pseudo elements but they aren't working, it's only one line.
:root {
--clr-dark: black;
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
}
.hamburger {
display: block;
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-dark);
width: 2em;
height: 3px;
border-radius: 2em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: '';
position: relative;
left: 0;
right: 0;
color: var(--clr-dark);
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
<header class="header">
<div>PORTFOLIO</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#"></i>Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Services</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>About me</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Work</a>
</li>
</ul>
</nav>
</header>

If you inspect the code in Firefox, you will see why.
So just add display: inline-block to .hamburger.
You also need to change position: relative to position: absolute for your pseudo elements.
:root {
--clr-dark: black;
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
}
.hamburger {
/* display: block; */
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
display: inline-block; /* ADDED */
background: var(--clr-dark);
width: 2em;
height: 3px;
border-radius: 2em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: '';
/* position: relative; */
position: absolute; /* ADDED */
left: 0;
right: 0;
color: var(--clr-dark);
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
<header class="header">
<div>PORTFOLIO</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#"></i>Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Services</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>About me</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Work</a>
</li>
</ul>
</nav>
</header>

You should have three <span class="hamburger"></span> and a little changes on style
:root {
--clr-dark: black;
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
}
.hamburger {
margin-bottom:4px;
display: block;
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-dark);
width: 2em;
height: 3px;
border-radius: 2em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: '';
position: relative;
left: 0;
right: 0;
color: var(--clr-dark);
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
<header class="header">
<div>PORTFOLIO</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#"></i>Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Services</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>About me</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#"></i>My Work</a>
</li>
</ul>
</nav>
</header>

The responsive menu messes everything up

I'm eating my head for days with this problem. I proposed to make a menu, two different menu lists, the language one and the section one. In normal size, I like how it looks, the problem comes when I make it responsive to look at how it looks and I don't know how to find a solution.
I leave you the part of css and html.
<header class="l-header">
<nav class="nav bd-grid">
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li>
<img src="img/espana (1).png" alt="">
</li>
<li>
<img src="img/pais-vasco (1).png" alt="">
</li>
<li>
<img src="img/estados-unidos-de-america (1).png" alt="">
</li>
<li>
<img src="img/francia (1).png" alt="">
</li>
<li>
<img src="img/alemania.png" alt="">
</li>
</ul>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">About me</li>
<li class="nav__item">Skills</li>
<li class="nav__item">Projects</li>
<li class="nav__item">Contact</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<em class='bx bx-menu'></em>
</div>
</nav>
</header>
*=====NAV=====*/ .nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
}
#media screen and (max-width: 768px) {
.nav__menu {
position: fixed;
top: var(--header-height);
right: 500%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
.nav__menu1 {
position: fixed;
top: var(--header-height);
right: -100%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
}
.nav__item {
margin-bottom: var(--mb-4);
}
.nav__link {
position: relative;
color: #fff;
}
.nav__link:hover {
position: relative;
}
.nav__link:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
.nav__logo {
color: var(--second-color);
}
.nav__toggle {
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
/*Active menu*/
.active::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
/*=== Show menu ===*/
.show {
right: 0;
}
can you help me.? Thanks a lot
After the code:

Here's my suggestion.
Move the language content to the bottom of the nav when responsive and change it to a side-by-side view.
<header class="l-header">
<nav class="nav bd-grid">
<div class="nav__menu nav__menu--lang" id="nav-menu">
<ul class="nav__list nav__list--lang">
<li>
<img src="img/espana (1).png" alt="">
</li>
<li>
<img src="img/pais-vasco (1).png" alt="">
</li>
<li>
<img src="img/estados-unidos-de-america (1).png" alt="">
</li>
<li>
<img src="img/francia (1).png" alt="">
</li>
<li>
<img src="img/alemania.png" alt="">
</li>
</ul>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">About me</li>
<li class="nav__item">Skills</li>
<li class="nav__item">Projects</li>
<li class="nav__item">Contact</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<em class='bx bx-menu'></em>
</div>
</nav>
</header>
*=====NAV=====*/ .nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
}
#media screen and (max-width: 768px) {
.l-header {
height: 100vh;
}
.nav {
position: relative;
height: 100%;
}
.nav__menu {
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
.nav__menu--lang {
position: absolute;
bottom: 0;
}
.nav__list--lang {
display: flex;
}
}
.nav__item {
margin-bottom: var(--mb-4
}
.nav__link {
position: relative;
color: #fff;
}
.nav__link:hover {
position: relative;
}
.nav__link:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
.nav__logo {
color: var(--second-color);
}
.nav__toggle {
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
/*Active menu*/
.active::after {
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
/*=== Show menu ===*/
.show {
right: 0;
}

CSS Vertical Nav Issue with Z-Index and Drop Down List

#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
#media (min-width: 768px) {
.bootstrap-vertical-nav .collapse {
display: block;
}
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 220px;
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
/* this background color doesn't trigger */
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: 0;
}
.sidebar-nav li:first-child a {
background-color: #1a1a1a;
color: 555;
}
.sidebar-nav li:nth-child(2):before {
background-color: #d12525;
}
.sidebar-nav li:nth-child(3):before {
background-color: #4c366d;
}
.sidebar-nav li:nth-child(4):before {
background-color: #583e7e;
}
.sidebar-nav li:nth-child(5):before {
background-color: #64468f;
}
.sidebar-nav li:nth-child(6):before {
background-color: #704fa0;
}
.sidebar-nav li:nth-child(7):before {
background-color: #7c5aae;
}
.sidebar-nav li:nth-child(8):before {
background-color: #8a6cb6;
}
.sidebar-nav li:nth-child(9):before {
background-color: #987dbf;
}
.sidebar-nav li:hover:before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav li a {
background-color: #1a1a1a;
color: #fff;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
z-index: -2;
}
.sidebar-nav li.open:hover before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav .dropdown-menu {
background-color: #222222;
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
background-color: transparent;
color: #fff;
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
<div class="collapse" id="collapseExample">
<ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3">
<li class="nav-item sidebar-brand">
<a nav-link href="#">
Bootstrap 4
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</li>
<li class="nav-item dropdown">
<a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i> Page 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
Issue 1) I'm working on a HTML + CSS sidenav, I'm having some trouble with the Z-Index, if you hover over an item in the side nav, there will be a color transition from left to right. I want the text to stay on top.
Issue 2) My drop down list won't work at all, I thought i followed the bootstrap tutorial on it.
This entire project is an angular2 project. if you can use ng-bootstrap for any of the functionality, great! if not, i appreciate any feedback on how to resolve either issue.
UPDATED: Solution, you'll need ng-bootstrap to have it working. Wasn't sure how to add the library to the snippet tool.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
#media (min-width: 768px) {
.bootstrap-vertical-nav .collapse {
display: block;
}
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 220px;
}
.sidebar-nav li {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
.sidebar-nav div {
display: inline-block;
line-height: 20px;
position: relative;
width: 100%;
}
/* this background color doesn't trigger */
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -2;
}
.sidebar-nav div:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -2;
}
.sidebar-nav li:first-child a {
background-color: #1a1a1a;
color: 555;
}
.sidebar-nav li:nth-child(n):before {
z-index: 1;
background-color: #b7e7ff;
}
.sidebar-nav li:nth-child(1):before {
background-color: transparent;
}
/*
BLUE: 0085c6 and darker is: 0c78ad
YELLOW: f3c300
BLACK: 000
GREEN: 009f3d
RED: e00024
*/
.sidebar-nav li:nth-child(n) div:before {
background-color: #0085c6;
z-index: 1;
}
.sidebar-nav li:hover:before {
transition: width 0.2s ease-in;
width: 100%;
z-index: -1;
}
.sidebar-nav li a {
background-color: #1a1a1a;
color: #fff;
display: block;
padding: 10px 15px 10px 30px;
text-decoration: none;
}
.sidebar-nav li.open:hover before {
transition: width 0.2s ease-in;
width: 100%;
}
.sidebar-nav .dropdown-menu {
background-color: #1a1a1a;
border-radius: 0;
border: none;
box-shadow: none;
margin: 0;
padding: 0 0 0 15%;
position: relative;
width: 100%;
}
.sidebar-nav .dropdown-menu li:nth-child(1):before {
background-color: #b7e7ff;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
background-color: transparent;
color: #fff;
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
font-size: 20px;
height: 65px;
line-height: 44px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">
<!--<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-block">
You can collapse this card by clicking Toggle
</div>
</div>
</div>-->
<div id="collapseExample" [ngbCollapse]="isCollapsed" class="bootstrap-vertical-nav">
<div class="collapse" id="collapseExample">
<ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3">
<li class="nav-item sidebar-brand">
<a nav-link href="#">
Bootstrap 4
</a>
</li>
<li class="nav-item">
<div>
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
</div>
</li>
<li class="nav-item dropdown">
<div ngbDropdown>
<a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</li>
<li class="nav-item">
<div>
<a class="nav-link disabled" href="#">Disabled</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-lg-9">
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<hr />
<div>
<h1>Right Pane - Bootstrap 4.0 Vertical Nav Example</h1>
</div>
</div>
</div>
</div>

The problem is you cannot use that li:before for both showing the left colored bar and also for the color transition, and still have the text on top.
What I suggest is adding a span element inside you list item, and that span should represent the colored bar that should always be present:
<li class="nav-item">
<span class="before-bar"></span>
<a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
.before-bar {
position: absolute;
height: 100%;
width: 3px;
}
.sidebar-nav li:nth-child(2):before,
.sidebar-nav li:nth-child(2) .before-bar {
background-color: #d12525;
}
See http://plnkr.co/edit/AHaTOQmBwllZV5bATFtJ?p=preview (only modified for the "Home" link)
Probably an even better solution would be to keep the li:before for the 3px color bar, and have the span for the color transition (with a lower z-index).

To keep the text on top, change the z-index for li:before
.sidebar-nav li:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: width 0.2s ease-in;
width: 3px;
z-index: -1;
}

Issue 1) I'm working on a HTML + CSS sidenav, I'm having some trouble with the Z-Index, if you hover over an item in the side nav, there will be a color transition from left to right. I want the text to stay on top.
.sidebar-nav li a{
position:relative;
z-index:0;
}
Issue 2) My drop down list won't work at all, I thought i followed the bootstrap tutorial on it.
This entire project is an angular2 project. if you can use ng-bootstrap for any of the functionality, great! if not, i appreciate any feedback on how to resolve either issue.
Try to add bootstrape.min.js

Position font awesome span icon above text within an anchor

I'm trying to make some buttons with text positioned below a font awesome icon where both are positioned centrally inside a list item, and I need the anchor element, which also contains the span element for the font awesome icon, to fill the entire size of the list item.
I can fill the list item with the anchor no problem, but I'm having trouble positioning the icon's span above the text in the anchor that contains it.
JSFiddle: https://jsfiddle.net/qod142fz/.
HTML:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>
CSS:
/* SIDEBAR PRIMARY */
#sidebarPrimary
{
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton
{
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover
{
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a > span
{
display: block;
text-align: center;
margin-bottom: 5px;
}

Problem is coming from flex. I recommend wrapping another div around the elements that should be centered inside the a tags
/* SIDEBAR PRIMARY */
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a .fa {
display: block;
height: 1em;
margin: 0 auto 5px;
text-align: center;
width: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-home"></span>Home
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-user"></span>Personal Details
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-briefcase"></span>Company
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-gbp"></span>Invoices
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-address-book"></span>Contacts
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-minus"></span>Expenses
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-list"></span>Payslips
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-cog"></span>Settings
</div>
</a></li>
</ul>
</div>

#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary>ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary>ul>li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary>ul>li.navButton>a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary>ul>li.navButton>a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary>ul>li.navButton>a>span {
display: block;
text-align: center;
margin-bottom: 5px;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 10px;
}
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>

Just add position: absolute; top: 40px; to font-awesome icons

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

<li> hover effect, pretty sure it's something to do with :after - html

Try targeting it with .menu-container li:hover a:after {} or .menu-container li a:hover:after {}

Related

Hover dropdown menu out of screen

Can't add the second two lines for hamburger menu

The responsive menu messes everything up

CSS Vertical Nav Issue with Z-Index and Drop Down List

Position font awesome span icon above text within an anchor

Categories

Resources