We Keep Coding

My menu does not display a hamburger icon anymore

After changing some styles, the hamburger icon for mobile phones does not display anymore, how can I bring it back? also what would be the best way to add a little bit more white space above and under the menu but keep the position the same?
HTML:
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>
CSS:
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
JS:
$(document).ready(function() {
"use strict";
var myNav = {
init: function() {
this.cacheDOM();
this.browserWidth();
this.bindEvents();
},
cacheDOM: function() {
this.navBars = $(".navBars");
this.xBxHack = $("#xBxHack");
this.navMenu = $("#menu");
},
browserWidth: function() {
$(window).resize(this.bindEvents.bind(this));
},
bindEvents: function() {
var width = window.innerWidth;
if (width < 600) {
this.navBars.click(this.animate.bind(this));
this.navMenu.hide();
this.xBxHack[0].checked = false;
} else {
this.resetNav();
}
},
animate: function(e) {
var checkbox = this.xBxHack[0];
!checkbox.checked ?
this.navMenu.slideDown() :
this.navMenu.slideUp();
},
resetNav: function() {
this.navMenu.show();
}
};
myNav.init();
});
In this jsfiddle you can see that the icon does not appear when the screen is small: https://jsfiddle.net/quehf3x9/

Firstly make sure that you're loading the Font Awesome library. That wasn't being loaded in the JS Fiddle example. So I included a link to a CDN.
Secondly, add a width, height and background color to the CSS for the navbars:
.mainNav .navBars {
width: 30px;
height: 30px;
color: #111;
}
See my updated JS Fiddle for a working example.

You have two problems with your fiddle above. The first is that you did not include the font awesome library. The code does not know what to do with the fa fa-bars classes. To include an external library in jsfiddle:
Find a CDN where the file is hosted
Copy the path to the file
Paste it in the left sidebar in the External Resources section.
Select the + icon to add the resource to the fiddle.
Once the file is loaded, you can see from the developer tools (open the tools by selecting F12) that the class is applied but the icon color is white. You'll want to add some CSS to color the icon such as:
label i {
color: #333;
}
I've made these two changes and updated your fiddle here.

There are two things-
First one you are missing to include Font Awesome library
Secondly the color of icon is white. So you won't be able to see it even if you include the library, changing the color will do the trick <i class="fa fa-bars" style="color:black;"></i>
.mainNav {
background: #fff;
color: #fff;
max-height: 70px;
position: relative;
top:35%;
}
.mainNav a {
text-decoration: none;
}
.mainNav .logo {
display: inline-block;
color: #fff;
font-size: 1.7em;
height: 40px;
line-height: 1.55em;
letter-spacing: -2px;
text-transform: uppercase;
padding: 0 10px;
z-index: 0;
/*POSITION*/
position: relative;
}
.mainNav .logo:hover:before {
background: #292938;
}
.mainNav .logo:before {
content: "";
background: #3C91E6;
z-index: -1;
/*POSITION*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mainNav .logo a {
color: #efefef;
}
.mainNav .menu {
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
letter-spacing:5px;
background: #fff;
font-size:10px;
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
border-top: 1px solid #fff;
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
/*POSITION*/
position: absolute;
top: 60px;
right: 0;
left: 0;
}
.mainNav .menu a {
color: #292938;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: block;
padding: 15px;
}
.mainNav .navBars {
display: inline-block;
font-size: 1.7em;
line-height: 1.5em;
float: right;
/*USER SELECTION*/
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
#xBxHack {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
#xBxHack:checked ~ nav .menu {
display: block;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 10px;
}
#media screen and (min-width: 600px) {
.mainNav {
overflow: hidden;
}
.mainNav .navBars {
display: none;
}
.mainNav .container {
padding-top: 0;
padding-bottom: 0;
}
.mainNav .logo {
margin: 10px 0;
}
.mainNav .menu {
display: block;
box-shadow: none;
border: none;
float: right;
/*POSITION*/
position: static;
}
.mainNav .menu li {
display: inline-block;
}
.mainNav .menu a {
border: none;
padding: 20px 10px;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
<div class="container">
<div class="logo">my<strong>Nav</strong></div>
<label class="navBars" for="xBxHack">
<i class="fa fa-bars" style="color:black;"></i>
</label>
<ul id="menu" class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</nav>

CSS issues none sense

I am trying to perfect my jQuery menu.
However I run on some CSS issues and I'm stuck. Here's my issues.
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
I run on some CSS issues and I'm stuck. Here's my issues.
I run on some CSS issues and I'm stuck. Here's my issues.

To sum it up:
To add paddings to links without icons, wrap all text inside items into <span> (only those that have no <span> yet) and add padding-left to spans that have no icon before them:
nav li span:first-child {
padding-left: 24px;
}
Display borders only for items that are last in the group:
nav li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
The scrollbar appears because you have min-width rule specified. Do not do it. It will mess up small screens because it will never collapse. Also remove padding-right: 65px; and padding-right: 280px; - they are bogus.
Here's the final fiddle: https://jsfiddle.net/pjb7jzjk/36/
P. S. I suggest you to add overflow-y: scroll rule to .sidebar-nav to make it scrollable on screens with small height.

Ad.1 - try to add
#nav li > ul > li {
padding-left: 3em;
}

why css break (not taking the height of li)?

I try to make one simple demo using this link
I am able to make this as understand better
here is demo But when I integrate it my application it break .Mean display half (in form of cut pieces ) .why ? CSS is not applied in that
Actually my breadcrumb not display as it display in my demo .I think ionic css is conflict my style css can we make this demo with ionic ? how to resolve this issue ?
here is my live application demo url
[![enter image description here][4]][4]
#my-breadcrumbs ul li {
list-style:none;
}
#my-breadcrumbs {
margin-top: 44px;
margin-left: 10px;
}
#my-breadcrumbs ul li a {
display: block;
float: left;
height: 25px;
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
#my-breadcrumbs ul li a:after {
content: "";
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid grey;
position: absolute; right: -20px; top: 0;
}
#my-breadcrumbs ul li a:before {
content: "";
position: absolute;
margin-top: -15px;
border-width: 20px 0 20px 20px;
border-style: solid;
border-color: grey grey grey transparent;
left: -20px;
}
/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none; }
/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-bottom-right-radius: 1px;
}

Try this
#my-breadcrumbs ul li a {
display: block;
float: left;
line-height: 13px; //Add this
height: 40px; //Change this
background: grey;
text-align: center;
padding: 15px 20px 0 20px;
position: relative;
margin: 0 22.5px 0 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
color: #fff;
}
If you wantmargin between each links change margin: 0 22.5px 0 0; to margin: 0 30px 0 0;

Why is nav bar sliding down skinny and then widening?

When you hover over a nav li item on my website, it should slide down the nav ul ul item, but when it slides down for some reason it is skinny, then widens after. Please look at my JSFiddle and help me out :D
JSFiddle Demo
HTML:
<body>
<header>
<nav>
<ul>
<li>Home
<ul>
<li>About Me</li>
</ul>
</li>
<li>Purposeful Living
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Academic Excellence
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
<li>Ethical Responsibility
<ul>
<li>7th - 8th</li>
<li>9th - 10th</li>
<li>11th - 12th</li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
Javascript/Jquery:
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
CSS:
` #import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}

During the animation overflow is set to hidden. When animation completes the inline overflow style is removed.
You have negative margin set on sub menu <li> so while the animation is in progress the part that is outside the parent is not visible.
Suggest you remove the negative margin and set the <ul> to left:0

Create a custom drop down select like the one used on twitter when user logs out

I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
​
So how can I build a custom select like the one used on twitter?

This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>