We Keep Coding

Semi-Collapsed Sidebar

I currently have a sidebar that looks like: this
This is the HTML code for it:
<div id="sidebar">
➕
<a class="active" href="#">🏠</a>
🙋‍♂️
🔧
🚪
</div>
Now I want to add a button to make the bar bigger, and also display text using below code:
Using onclick="openNav()" I have found this way:
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
If I hardcode in the text like this: ➕ New user, the text will also show when the bar is minimized, as in the first picture. But how can I only display the text if the bar is 250px?
This is my current sidebar CSS settings:
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}

Hope this helps, any questions I will be happy to answer :)
function openNav() {
// document.getElementById("sidebar").style.width = "250px";
// OR YOU CAN
document.getElementById("sidebar").classList.toggle("open");
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a span {
display: none;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
.open {
width:250px !important;
}
.open span {
display: inline !important;
}
<div id="sidebar">
➕<span> New user</span>
<a class="active" href="#">🏠<span> New user</span></a>
🙋‍♂️ <span> New user</span>
🔧<span> New user</span>
🚪<span> New user</span>
<button onclick="openNav()">Click</button>
</div>

I changed some style of #sidebar a
#sidebar a {
white-space: nowrap;
padding-left: 25px;
overflow: hidden;
transition: all 600ms ease;
}
For align the text in single line by adding white-space: nowrap;
overflow: hidden; // For hide overflow content
transition: all 600ms ease; // make animation smooth
function openNav(btn) {
btn.classList.toggle("active");
if(btn.classList.contains("active")){
btn.textContent = "x";
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}else{
btn.textContent = "☰";
document.getElementById("sidebar").style.width = "60px";
document.getElementById("main").style.marginLeft= "60px";
}
}
#main {
transition: margin-left .5s;
margin-left:60px;
transition: all 600ms ease;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
transition: all 600ms ease;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
white-space: nowrap;
padding-left: 25px;
word-spacing: 15px;
overflow: hidden;
transition: all 600ms ease;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋‍♂️ Hello
🔧 Settings
🚪 Mobile
</div>
<div id="main">
<button class="openbtn" onclick="openNav(this)">☰</button>
</div>
With My Demo :)
function openNav() {
document.getElementById("sidebar").classList.toggle("big");
}
#sidebar{
border:1px solid #ccc;
width:50px;
transition: all 600ms ease;
}
#sidebar a{
display:block;
background:#fff;
padding:15px 20px;
text-decoration:none;
white-space: nowrap;
overflow:hidden;
word-spacing: 10px;
transition: all 600ms ease;
}
#sidebar a.active{background:#e6e6e6;}
#sidebar.big{
width:200px;
}
<button onclick="openNav()">SIDEBAR</button>
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋‍♂️ Hello
🔧 Settings
🚪 Mobile
</div>

Responsive Navbar Dropdown (Not Bootstrap)

I have this Navbar and it works perfectly in the original mode, and when the screen's width is less than 950px it displays the buttons one under another, but the problem is, dropdown button is also there, which is okay, but it opens the dropdown content somewhere on a totally wrong side. What I wish is to make the dropdown content appear under the dropdown button. Is there something wrong with my code? Any help will be appreciated. My code:
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Add position:relative to nav ul li and give this css to dropdown
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
nav ul li{
position:relative
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li{
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Add position:relative to parent element #dropdownd. Then set position:absolute and top:value styles to child element .dropdown-contentd
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
/* add this */
#dropdownd {
position:relative
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
/* start: i changed here */
position: absolute;
top: 30px;
left: 0; right: 0; margin: 0 auto; /* this line optional...horizontal centering for absolute element */
min-width: 160px;max-width: 250px;
/* end */
background-color: royalblue;
color: #FFF;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

HTML/CSS: Add Icon to Text Button

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>

You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>

.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>

---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>

I have a drop down menu now how to create submenu inside one link using css

I am very new to css trying to learn new language, I have a dropdowm which i had done using css and html now how to create a submenu into it on hover over one link
Check my code till now what i did :
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #fff;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
So when user hover on Menu dropdown should come and when user hover in dropdown sub-drop down should come
Thanks in advance!!!

You should hide the sub-menu and show it when you hover on the link, just like the first dropdown
add this code to your css file
ul.dropdown li ul {
display:none;
}
ul.dropdown li.dropdown:hover ul {
display:block;
}
See working snippet:
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #ccc;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
ul.dropdown li ul {
position: absolute;
left: 100%;
top: -2px;
background: #ccc;
width: 100%;
border-top: 2px solid #8248ac;
display: none;
}
ul.dropdown li.dropdown:hover ul {
display: block;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>

Bootstrap navbar (left menu) not aligned properly at top

I have problems with left navigation bar positioning. If you run the snipped below on fullscreen and try to resize browser you will see that left navigation bar is not fixed to the top of page.
Also I header (logo and dropdowns) does not covers full page.
Maybe I missed something?
Any help will be highly appreciated!
Thanks, who wasted time to view this post and helped to dummy :)
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
header.navbar+nav.navbar{
/* margin-top: 20px;same margin-bottom .navbar */
}
.navbar.navbar-default.navbar-fixed-top{
margin-top: 50px;
}
.sidebar.navbar-fixed-top{
margin-top: 100px;
}
#media (min-width: 768px) and (max-width: 998px){
.navbar.navbar-default.navbar-fixed-top{
margin-top: 100px;
}
.sidebar.navbar-fixed-top{
margin-top: 150px;
}
}
/* Custom navbar default: global*/
.navbar.navbar-default{
background-color: #f8f8f8;
border-color: #e7e7e7;
margin: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-brand {
color: #666;
text-shadow: none;
min-width: 150px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666;
text-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a:hover{
color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a{
color: #fff;
background-color: #acc47f;
}
.navbar.navbar-default .navbar-nav > .active > a:hover{
color: #608224;
background-color: #acc47f;
}
.navbar.navbar-default .caret {
border-top-color: #ccc;
border-bottom-color: #ccc;
}
.navbar.navbar-default .caret:hover {
border-top-color: #333;
border-bottom-color: #333;
}
/* Custom sidebar menu */
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
-moz-transition: margin 200ms ease-out;
-o-transition: margin 200ms ease-out;
transition: margin 200ms ease-out;
}
/* Add gap to nav and right windows.*/
.main{
padding: 10px 10px 0 10px;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*small/medium side display*/
#media (min-width: 768px) {
/*Allow main to be next to Nav*/
.main{
position: absolute;
width: calc(100% - 40px); /*keeps 100% minus nav size*/
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main{
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
text-align: center;
width: 100%;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a{
padding-right: 13px;
min-width: 100px;
}
/*custom sidebar nav*/
nav.sidebar ul.nav.navbar-nav{
margin: 0;
}
nav.sidebar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: white;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child{
border-top: 1px #e5e5e5 solid;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li{
border-bottom: 1px #e5e5e5 solid;
}
/*adds background on hover*/
nav.sidebar .navbar-nav > li:hover{
color: #fff;
background-color: #43600E;
}
/*removes border last element*/
nav.sidebar .navbar-nav > li.last{
border-bottom: none;
}
/* Colors/style dropdown box*/
nav.sidebar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/*allows nav box to use 100% width*/
nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*O quanto o menu irá esconder á esquerda*/
/*gives sidebar width/height*/
nav.sidebar{
width: 200px;
height: 100%;
margin-left: -270px;
float: left;
z-index: 8000;
margin-bottom: 0px;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover{
margin-left: 0px;
}
/*for hiden things when navbar hidden*/
.forAnimate{
opacity: 0;
}
}
/* .....NavBar: Fully showing nav bar..... */
#media (min-width: 1330px) {
/* Allow main to be next to Nav
.main{
width: calc(100% - 200px); keeps 100% minus nav size
margin-left: 200px;
}
Show all nav
nav.sidebar{
margin-left: 0px;
float: left;
}
Show hidden items on nav
nav.sidebar .forAnimate{
opacity: 1;
} */
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: #CCC;
background-color: transparent;
}
nav:hover .forAnimate{
opacity: 1;
}
/*---- FIM SLIDE MENU*/
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
nav.navbar-findcond { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; }
nav.navbar-findcond a { color: #f14444; }
nav.navbar-findcond ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover,
nav.navbar-findcond ul.navbar-nav a:visited,
nav.navbar-findcond ul.navbar-nav a:focus,
nav.navbar-findcond ul.navbar-nav a:active { background: #fff; }
nav.navbar-findcond ul.navbar-nav a:hover { border-color: #f14444; }
nav.navbar-findcond li.divider { background: #ccc; }
nav.navbar-findcond button.navbar-toggle { background: #f14444; border-radius: 2px; }
nav.navbar-findcond button.navbar-toggle:hover { background: #999; }
nav.navbar-findcond button.navbar-toggle > span.icon-bar { background: #fff; }
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; }
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; }
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; }
nav.navbar-findcond span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head><title>test</title>
<link type="text/css" rel="stylesheet" media="all" href="bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="all" href="nabs.css" />
<link type="text/css" rel="stylesheet" media="all" href="font-awesome.min.css" />
</head>
<body class="sidebar-mini">
<div class="main">
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<div class="nav-side-menu">
<div class="brand">logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#1" class="collapsed">
<i class="fa fa-gift fa-lg"></i> Processing </li>
<li data-toggle="collapse" data-target="#4" class="collapsed"><i class="fa fa-gift fa-lg"></i> Payments </li>
</ul>
</div>
</div>
</nav>
</aside>
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-fw fa-bell-o"></i> Invites <span class="badge">0</span>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-fw fa-tag"></i> new <span class="badge">Video</span> video</li>
<li><i class="fa fa-fw fa-thumbs-o-up"></i> <span class="badge">Music</span> liked</li>
</ul>
</li>
<li class="active">Main <span class="sr-only">(current)</span></li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>test1</li>
<li class="divider"></li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="content-header">
<h1>
<small>hi</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section><section class="content">
<div class="row">
<div class="col-md-12">
hi there</div></div>
</section>
<table border="0" style="border: 1px; border-style: dotted;" cellspacing="0" cellpadding="0" width="100%">
<tr bgcolor="#D5E7F7">
<td width="100%">
</td>
</tr>
</table>
</div>

The black navbar has a sidebar class seems to break the functionality of the navbar.
PS: fixing this will cause the black navbar to fix to the top of the screen and be overlayed by the white navbar, if you want the black one to have precedent you'll need to up its z-index.