I am working on a navigation sidebar with icons which on hover display text along with icon with reference to JFarrow's https://codepen.io/JFarrow/pen/fFrpg
<li>
<a href="http://justinfarrow.com">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">Dashboard</span>
</a>
</li>
But in my case I would like to hide icons when I hover on the sidebar and display only text.
May I know a best way to do this?
A pure css solution would be the next:
Hope this helps
Hice icon image
nav.main-menu:hover i:before {
display: none;
}
Adapt sidebar width
nav.main-menu:hover {
width:200px;
}
Reduce icon space
nav.main-menu:hover .fa{
width: 10px;
}
Added snipet so everyone can try it
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: #212121;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
nav.main-menu:hover i:before {
display: none;
}
nav.main-menu:hover {
width: 200px;
}
nav.main-menu:hover .fa {
width: 10px;
}
<html>
<head>
</head>
<body>
<div class="area"></div>
<nav class="main-menu">
<ul>
<li>
<a href="http://justinfarrow.com">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Typography and Icons
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
You will need to set width:0 and visibility:hidden to the fa on .main-menu:hover
Also use flexbox...don't use table on <a> elements.
.main-menu:hover .fa {
width: 0;
visibility: hidden;
}
Stack Snippet
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
width: 60px;
height: 36px;
line-height: 36px;
text-align: center;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 250px;
overflow: visible;
}
.main-menu {
background: #212121;
border-right: 1px solid #e5e5e5;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 60px;
overflow: hidden;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
}
.main-menu>ul {
margin: 7px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
.main-menu li>a {
position: relative;
display: flex;
align-items: center;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
width: 190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.main-menu:hover .fa {
width: 0;
visibility: hidden;
}
.main-menu:hover a {
padding-left: 20px;
}
<div class="area"></div>
<nav class="main-menu">
<ul>
<li><i class="fa fa-home fa-2x"></i><span class="nav-text">Dashboard</span></li>
<li class="has-subnav"><i class="fa fa-laptop fa-2x"></i><span class="nav-text">UI Components</span></li>
<li class="has-subnav"><i class="fa fa-list fa-2x"></i><span class="nav-text">Forms</span></li>
<li class="has-subnav"><i class="fa fa-folder-open fa-2x"></i><span class="nav-text">Pages</span></li>
<li><i class="fa fa-bar-chart-o fa-2x"></i><span class="nav-text">Graphs and Statistics</span></li>
<li><i class="fa fa-font fa-2x"></i><span class="nav-text">Typography and Icons</span></li>
<li><i class="fa fa-table fa-2x"></i><span class="nav-text">Tables</span></li>
<li><i class="fa fa-map-marker fa-2x"></i><span class="nav-text">Maps</span></li>
<li><i class="fa fa-info fa-2x"></i><span class="nav-text">Documentation</span></li>
</ul>
<ul class="logout">
<li><i class="fa fa-power-off fa-2x"></i><span class="nav-text">Logout</span></li>
</ul>
</nav>
Default the icon to display none and then add hover css property. Something like this,
<li>
<a href="http://justinfarrow.com">
<i class="fa fa-home fa-2x my_icon"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<style>
.my_icon{
display :none;
}
.my_icon:hover{
display :visible;
}
</style>
Related
This is a side-navbar file which I made by watching a youtube video and I tweaked some things in it and its working fine but there's a little problem.
Whenever I hover on the profile info box which is on bottom it starts to dance. Why?
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e) => {
let arrowParent = e.target.parentElement.parentElement; //selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", () => {
sidebar.classList.toggle("close");
});
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
z-index: 100;
transition: all 0.5s ease;
backdrop-filter: blur(25px);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
}
.sidebar.close {
width: 78px;
}
.sidebar .logo-details {
height: 60px;
width: 100%;
display: flex;
align-items: center;
}
.sidebar .logo-details i {
font-size: 30px;
color: #444444;
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
}
.sidebar .logo-details .logo_name {
font-size: 22px;
color: #444444;
font-weight: 600;
transition: 0.3s ease;
transition-delay: 0.1s;
}
.sidebar.close .logo-details .logo_name {
transition-delay: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links {
height: 100%;
padding: 30px 0 150px 0;
overflow: auto;
}
.sidebar.close .nav-links {
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar {
display: none;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
backdrop-filter: blur(40px);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
}
.sidebar .nav-links li .iocn-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link {
display: block
}
.sidebar .nav-links li i {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #444444;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow {
display: none;
}
.sidebar .nav-links li a {
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name {
font-size: 18px;
font-weight: 400;
color: #444444;
transition: all 0.4s ease;
}
.sidebar.close .nav-links li a .link_name {
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 80px;
margin-top: -10px;
display: none;
backdrop-filter: blur(25px);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
}
.sidebar .nav-links li.showMenu .sub-menu {
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: #444444;
font-size: 15px;
padding: 5px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding: 3px 20px 6px 16px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar .profile-details {
position: fixed;
bottom: 0;
width: 260px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
transition: all 0.5s ease;
backdrop-filter: blur(60px);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
}
.sidebar.close .profile-details {
background: none;
}
.sidebar.close .profile-details {
width: 78px;
}
.sidebar .profile-details .profile-content {
display: flex;
align-items: center;
}
.sidebar .profile-details img {
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 16px;
margin: 0 14px 0 12px;
transition: all 0.5s ease;
backdrop-filter: blur(70px);
box-shadow: 10px 0 15px rgba(0, 0, 0, 0.1);
}
.sidebar.close .profile-details img {
padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
color: #444444;
font-size: 18px;
font-weight: 500;
white-space: nowrap;
}
.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job {
display: none;
}
.sidebar .profile-details .job {
font-size: 12px;
}
.home-section {
position: relative;
height: 100vh;
left: 260px;
width: calc(100% - 260px);
transition: all 0.5s ease;
background: brown;
opacity: 0.2;
}
.sidebar.close~.home-section {
left: 78px;
width: calc(100% - 78px);
}
.home-section .home-content {
height: 60px;
display: flex;
align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text {
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu {
margin: 0 15px;
cursor: pointer;
}
.home-section .home-content .text {
font-size: 26px;
font-weight: 600;
}
#media (max-width: 420px) {
.sidebar.close .nav-links li .sub-menu {
display: none;
}
}
<div class="sidebar close">
<div class="logo-details">
<i class='bx bx-library'></i>
<span class="logo_name">E-Library</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="link_name">Dashboard</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Category</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-collection'></i>
<span class="link_name">Category</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>PHP & MySQL</li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-book-alt'></i>
<span class="link_name">Posts</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Posts</a></li>
<li>Web Design</li>
<li>Login Form</li>
<li>Card Design</li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="link_name">Analytics</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Analytics</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-line-chart'></i>
<span class="link_name">Chart</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Chart</a></li>
</ul>
</li>
<li>
<div class="iocn-link">
<a href="#">
<i class='bx bx-plug'></i>
<span class="link_name">Plugins</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Plugins</a></li>
<li>UI Face</li>
<li>Pigments</li>
<li>Box Icons</li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-compass'></i>
<span class="link_name">Explore</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Explore</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-history'></i>
<span class="link_name">History</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">History</a></li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="link_name">Settings</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Settings</a></li>
</ul>
</li>
<li>
<div class="profile-details">
<div class="profile-content">
<img src="image/profile.jpg" alt="profileImg">
</div>
<div class="name-job">
<div class="profile_name">Sam</div>
<div class="job">Student</div>
</div>
<i class='bx bx-log-out'></i>
</div>
</li>
</ul>
</div>
<section class="home-section">
<div class="home-content">
<i class='bx bx-menu'></i>
</div>
</section>
It seems like fixed position is creating problems with the backdrop-filter. Try to replace:
.sidebar .nav-links li:hover{
backdrop-filter: blur(40px);
box-shadow: 10px 0 15px rgba(0,0,0,0.1);
}
with:
.sidebar .nav-links li:hover:not(.sidebar .nav-links li:last-child){
backdrop-filter: blur(40px);
box-shadow: 10px 0 15px rgba(0,0,0,0.1);}
}
.social-buttons ul li .fab:hover{
font-size: 30px;
}
.social-buttons{
position: absolute;
top: 100px;
left: 20px;
}
.social-buttons ul{
list-style: none;
}
.social-buttons ul li{
position: relative;
height: 50px;
width: 50px;
background-color: white;
border-radius: 10px;
margin: 10px 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.social-buttons ul li .fab{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 25px;
}
.social-buttons ul li .fab:hover{
font-size: 30px;
}
<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>
<div class="social-buttons">
<ul>
<a href="#">
<li>
<i class="fab fa-instagram"></i>
</li>
</a>
<a href="#">
<li>
<i class="fab fa-pinterest"></i>
</li>
</a>
<a href="#">
<li>
<i class="fab fa-facebook-f"></i>
</li>
</a>
<a href="#">
<li>
<i class="fab fa-youtube"></i>
</li>
</a>
</ul>
I wrote the above code. It only increases the font size when hovering on only icons.
In the above fiddle . I want to change the font size(icon size) of .fab(icons) when the user hovers on .social-buttons ul li(the box covering the social media icons)
Replace .social-buttons ul li .fab:hover{ with .social-buttons ul li:hover .fab{.
Please note that your HTML is currently invalid. You have useless a tags wrapping your list items. Remove those, they're not allowed at that point. ul can only have li children. If you want the link-like mouse cursor, just add cursor: pointer; on the li.
.social-buttons {
position: absolute;
top: 100px;
left: 20px;
}
.social-buttons ul {
list-style: none;
}
.social-buttons ul li {
position: relative;
height: 50px;
width: 50px;
background-color: white;
border-radius: 10px;
margin: 10px 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.social-buttons ul li .fab {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
}
.social-buttons ul li:hover .fab {
font-size: 30px;
}
<script src="https://kit.fontawesome.com/fc692f1356.js" crossorigin="anonymous"></script>
<div class="social-buttons">
<ul>
<li>
<i class="fab fa-instagram"></i>
</li>
<li>
<i class="fab fa-pinterest"></i>
</li>
<li>
<i class="fab fa-facebook-f"></i>
</li>
<li>
<i class="fab fa-youtube"></i>
</li>
</ul>
</div>
I'm tying to get a ul to drop down a few link icons, but no matter what I type, the only thing that changes is the orientation of the icons. I feel like I'm missing something rather simple, but nor Google or Foundation's website have helped. I've tried calling to the nested ul using .menu li a i {}, but that's wrong. I've tried other ways as well with no positive results.
/* Styles go here */
.menu-hover-lines {
margin-top: 30px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: #333;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li.active>a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
.menu li a>i {
display: none;
}
.menu i:hover {
display: inline;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">
<li>
Get in touch
<ul class="menu">
<li>
<a href="#">
<i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
</a>
</li>
<li>
<a href="http://twitter.com">
<i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
</a>
</li>
<li>
<a href="http://instagram.com">
<i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
</a>
</li>
</ul>
</li>
</ul>
you have to add a div to the outside of all your content for the hover effect
/* Styles go here */
.menu-hover-lines {
margin-top: 30px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: #333;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li.active>a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
ul .menu {
display: none;
}
.drop_down:hover ul .menu{
display: inline;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="drop_down">
<ul class="menu dropdown vertical menu-hover-lines" data-dropdown-menu="">
<li>
Get in touch
<ul class="menu">
<li class="content">
<a href="#">
<i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i>
</a>
</li>
<li class="content">
<a href="http://twitter.com">
<i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i>
</a>
</li>
<li class="content">
<a href="http://instagram.com">
<i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
For some reason I can't get my last nav link to stay with the rest of them. I can do this if i set .dropdown ul li .menu position to absolute, but then the drop down links are pushed to the right and not centered. Padding-right nor margin-right doesn't resolve this issue.
JSFiddle
Before
After
Position: Absolute
.title {
font-family: 'Philosopher', sans-serif;
margin-left: 20px;
color: white;
float: left;
padding-right: 70px;
padding-top: 5px;
}
#body {
background-color: black;
}
.dropdown ul {
padding-top: 10px;
}
.dropdown ul li .menu {
position: absolute;
float: none;
}
.menu-hover-lines {
margin-top: 35px;
float: right, bottom;
text-align: center;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
transition: all 0.35s ease;
}
.menu-hover-lines li a {
padding: 0.75rem 0;
color: white;
position: relative;
margin-left: 1rem;
margin-right: 4rem;
margin-top: 20px;
}
.menu-hover-lines li:first-child a {
margin-left: 10px;
}
.menu-hover-lines li.active > a {
background-color: transparent;
}
/* Nav transition settings */
.menu-hover-lines a::before,
.menu-hover-lines a::after {
height: 3px;
position: absolute;
content: '';
transition: all 0.40s ease;
background-color: #932929;
width: 0;
}
.menu-hover-lines a::before {
top: 0;
left: 0;
}
.menu-hover-lines a::after {
bottom: 0;
right: 0;
}
/* Nav text settings on hover*/
.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
color: #8e8e8e;
transition: all 0.40s ease;
}
.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
width: 100%;
}
.dropdown li .menu {
display: none;
}
.dropdown li:hover .menu {
display: inline-block;
float: none;
}
<!-- Nav Bar -->
<div class="dropdown" >
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li >Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>
I think you need to add left:0 and top:100% to your dropdown-menu with position:absolute. Remember to add position:relative to your .menu>li...
I have added .dropdown-menu class in the dropdown ul...
Also I noticed that you have written float: right, bottom in your css which is not valid...
Stack Snippet
body {
font: 13px Verdana;
}
.menu {
padding: 0;
display: flex;
}
.menu>li {
margin: 0 10px;
list-style: none;
position: relative;
}
.menu li a {}
.dropdown-menu {
padding: 0;
position: absolute;
top: 100%;
left: 0;
border: 1px solid;
padding: 10px;
}
.dropdown-menu>li {
list-style: none;
}
<!-- Nav Bar -->
<div class="dropdown">
<ul class="menu dropdown menu-hover-lines" data-dropdown-menu>
<li>Home</li>
<li>Collections
<ul class="dropdown-menu">
<li>Autos</li>
<li>Models</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>
When I click on the links in the dropdown menu, it doesn't go any where. It just hided the drop down menu.
What am I doing wrong?
demo
.profile {
float: right;
margin-top: 50px;
margin-right: 20px;
}
.nav- {
/*margin: 0;
padding: 0;*/
list-style-type: none;
}
.nav- li a {
color: #f00;
}
profile .dropdown > a {
line-height: 80px;
}
.dropdown a:focus {
color: #00f;
}
.dropdown-container {
position: absolute;
top: 130px;
right: 0px;
max-height: 0;
overflow: hidden;
background: #FFFFFF;
color: #fff;
box-shadow: 0px 0px 2px #FFFFFF;
}
.dropdown a:focus ~ .dropdown-container {
max-height: 500px;
transition: max-height 0.5s ease-in;
-webkit-transition: max-height 0.5s ease-in;
-moz-transition: max-height 0.5s ease-in;
}
.dropdown-menu li a {
display: inline-block;
min-width: 200px;
padding: 15px 20px;
border-bottom: 1px solid #333333;
color: #CCCCCC;
background-color: #171717;
}
.dropdown-menu li a:hover {
color: #FFFFFF;
background: #030303;
}
<body>
<div class="profile">
<ul class="nav-">
<li class="dropdown">Dropdown Menu <i class="fa fa-angle-down"></i>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li>Help <i class="fa fa-question-circle pull-right"></i>
</li>
<li>Log out <i class="fa fa-sign-out pull-right"></i>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>