Develop Reference

Event listener not firing for some reason

I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>

That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.

HTML CSS/JS Bottom navbar Sliding Up

I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}

You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.

It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.

You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.

Why I can't set transition for element

I have mobile menu, when click on red square, my mobile menu shows.
Problem is on right side where is image, there is problem with transition, because isn't applied to them, because left not accept transition, I tried using this for div
fiddle1
THis also have problem with animation on image, check them
left:0px,
margin-left:250px;
but not working correctly on small phones like Iphone 4 ...
fiddle2
$("#show-mobile-navigation").on('click', function() {
$('.glavni-kontejner').toggleClass("show-mob-nav");
$('#mobile-navigation').toggleClass("show-mob-nav2");
});
.glavni-kontejner {
position: relative;
overflow-x: hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#show-mobile-navigation {
width: 40px;
height: 40px;
background-color: #ea1111;
position: absolute;
left: 15px;
top: 10px;
text-align: center;
z-index: 9999999999999;
}
#show-mobile-navigation i {
color: #fff;
font-size: 25px;
margin-top: 8px;
margin-left: -5px;
}
#mobile-navigation {
margin-top: 151px;
border-right: 3px solid #dc3128;
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
padding: 5px 0;
background-color: #dc3128 !important;
overflow-y: scroll;
z-index: 9999999999999;
padding-bottom: 140px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#mobile-navigation ul {
margin-top: 30px;
}
#mobile-navigation li {
display: block;
margin-bottom: 15px;
}
#mobile-navigation ul li:last-child {
padding-bottom: 15px;
}
#mobile-navigation li a {
font-family: Bold;
color: #fff;
font-size: 14px;
}
.show-mob-nav {
left: 0px;
margin-left: 250px;
overflow: hidden !important;
position: fixed !important;
height: auto !important;
width: 100% !important;
}
.show-mob-nav #show-mobile-navigation {
left: 250px !important;
}
.show-mob-nav #mobile-navigation {
left: 250px !important;
overflow-y: scroll !important;
}
.show-mob-nav2 {
left: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-mobile-navigation" class="container-fluid nopadding">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div id="mobile-navigation">
<ul>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
<li> Lorem
</li>
</ul>
</div>
<div class="glavni-kontejner">
<<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="">
</div>
</div>

For transition an element needs a default value and the end value.
you have the end value set in
.show-mob-nav {
left: 250px;
so your container also needs a starting value
.glavni-kontejner {
left:0;
The above code is fron your jsfiddle. With margin it would be the same
.show-mob-nav {
margin-left: 250px;
}
.glavni-kontejner {
margin-left:0;
}

Responsive Navigation Bar Toggle Menu jQuery

After a user clicks anywhere on the page in a screen size > 600px the navigation list items disappear.
Also the backgrounds for the 9 panels in the body are set with a width of 100%, however the background is still not covering the page fully with space still showing on the left and right.
Any help on finding the fix for these issues is appreciated! :-)
/*navigation icon animation*/
var trigger='X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger='X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger=='X')
{
$("#toggle-menu").toggleClass();
trigger='ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
});
/****Landscape****/
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
a {
color: #000000
}
a:focus, a:hover { color: #484747; }
a:active { color: #484747; }
/*----/----global styles*/
/*Nav Bar*/
.header {
background: #d3d3d3;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
float: right;
text-align: right;
background-color: #d3d3d3;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
height: 100%;
background: #000000;
text-align: center;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel {
color: #ffffff;
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float:left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 600px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #d3d3d3;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #d3d3d3;
left: 0;
top: 39px;
}
.nav > li {
display: block;
float: center;
border-bottom: 0.05em solid #000000;
}
.nav > li:last-child {
border-bottom: none;
}
/*----/----global styles*/
/*logo*/
.logo {
float:left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
cursor: pointer;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="panel" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank" id="panel2">
<div class="inner"> 2 </div>
</div>
<div class="panel" id="panel3">
<div class="inner"> 3 </div>
</div>
<div class="panel panel-blank" id="panel4">
<div class="inner"> 4 </div>
</div>
<div class="panel" id="panel5">
<div class="inner"> 5 </div>
</div>
<div class="panel panel-blank" id="panel6">
<div class="inner"> 6 </div>
</div>
<div class="panel" id="panel7">
<div class="inner"> <P>contact</P> </div>
</div>
<div class="panel panel-blank" id="panel8">
<div class="inner"> <p>Social</p> </div>
</div>
<footer>
<div class="panel " id="panel9">
<div class="inner"> Footer </div>
</div>
</footer>

I don't see any problem with the width of the 9th panel.
Here is the what you want based on your words of-course.
After a user clicks anywhere on the page in a screen size > 600px the
navigation list items disappear
Fiddle example (UPDATED based on your comment): https://jsfiddle.net/wexd3spp/19/
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=600) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 600) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
});

Okay so I have made a copy of this project myself and looked at all of the problems you have got and tried to find the simplest solution to them I can.
The problem with the spacing either side of the page is because you need to add the following in the css:
body {
margin: 0;
}
For the nav not toggling open and close I did the following:
Add this to your css:
.show {
display: block!important;
}
And then I wrote some simple JQuery to toggle the nav:
$('#toggle-menu').click(function(){
$('.nav').toggleClass('show');
});

Twitter Bootstrap not working in CodeIgniter website but working in fiddle

My Problem is that i cant get the twitter bootstrap to work in my website
whereas it works perfectly fine in the fiddle: http://jsfiddle.net/Mns8q/32/
Can anyone tell me what is the problem.?
Thanks in advance.
This code is present in the view that is called when you reach the url in my website, which is same as the fiddle :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.js" ></script>
<style>
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.menu {
height:100%;
/* background-color: #3D6AA2; */
&.collapse {
float:left;
height: 100% !important;
width: auto;
}
&.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
&.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
&.collapse.in.width {
width: auto;
}
&.collapse.in.height {
height: auto;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
}
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
changeContent = function(key) {
html = textHash[key];
$('#contentm').html(html);
}
$("#menu a").click(function(e) {
$('#menu').collapse('hide');
changeContent(e.target.innerText);
});
textHash = {
"Futurama": "<h1>Bendin' in the Wind</h1><p>Oh, but you can. But you may have to metaphorically make a deal with the devil. And by \"devil\", I mean Robot Devil. And by \"metaphorically\", I mean get your coat. Say what? Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Michelle, I don't regret this, but I both rue and lament it.</p>",
"Star Wars": "<h1>The Empire Strikes Back</h1><p>Remember, a Jedi can feel the Force flowing through him. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>",
"Doctor Who": "<h1>The Poison Sky</h1><p>Stop talking, brain thinking. Hush. You hit me with a cricket bat. You've swallowed a planet! Stop talking, brain thinking. Hush. It's a fez. I wear a fez now. Fezes are cool. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</p>"
};
});
</script>
</head>
<body>
<div class="frame">
<div id="menu" class="menu nav-collapse collapse width">
<div class="collapse-inner">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
Menu
</div>
</div>
<ul class="nav nav-tabs nav-stacked">
<li><a>Futurama</a></li>
<li><a>Star Wars</a></li>
<li><a>Doctor Who</a></li>
</ul>
</div>
</div>
<div class="view">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div id="contentm">
Integer eu quam et lacus luctus molestie.
</div>
</div>
</div>
</body>
</html>

It appears that you are not using SCSS on your site, while you are on the jsfiddle.
You could re-write your CSS as follows:
#import url('http://psestest.hubvents.com/assets/css/bootstrap.css');
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.frame {
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.navbar .navbar-inner {
border-radius: 0;
padding-left: 5px;
}
.collapse-inner {
position: relative;
width: 250px;
height: 100%;
}
.navbar .navbar-inner {
text-align: center;
color: grey;
font-size: 1.2em;
line-height: 38px;
}
.nav-stacked {
padding: 0 10px;
}
.view {
width: 50%;
height: 100%;
overflow: hidden;
}
.navbar .navbar-inner .btn-navbar {
display: block;
float: left;
}
#contentm {
margin: auto 15px;
text-align: justify;
}
.menu {
height:100%;
}
.collapse {
float:left;
height: 100% !important;
width: auto;
}
.collapse.height {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.collapse.width {
position: relative;
width: 0;
overflow: hidden;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
.collapse.in.width {
width: auto;
}
.collapse.in.height {
height: auto;
}