We Keep Coding

Scroll position problem with resposive navigation

I have problem with resposive navigation that i worked on.The problem is that when i open and then closed the menu it's take me back to the beginning of the page.I want when open and then closed the menu scroll position to be the same as that before opening the menu.How to make that?
HTML
<header class="header">
<div class="logo">
<h2>LOGO</h2>
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i></div>
<div id="menu" class="sidemenu">
Home
About
Contact
Login
×
</div>
</nav>
</header>
CSS
#mainbox{
font-size: 24px;
cursor: pointer;
transition: all .6s;
display:none;
}
.sidemenu{
background-color: #222;
color:#999;
float:right;
}
.sidemenu a{
padding:20px 20px;
text-decoration: none;
font-size: 20px;
color: #999;
display: inline-block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: -15px;
right: 15px;
font-size: 36px;
margin-left: 0px;
display:none;
}
.fas{
color:#999;
margin-top:20px;
margin-right:32px;
}
.fas:hover{
color:white;
}
#media screen and (max-width: 600px){
#mainbox{
display:block;
float:right;
}
.header{
position: fixed;
top: 0;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display:block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #222;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
}
.sidemenu a{
display:block;
text-decoration: none;
font-size: 20px;
color: #999;
}
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}

It's because of your href="#", just add e.preventDefault() to close function.
html
×
js
function closeFunction(e){
e = e || window.event;
e.preventDefault()
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
Hope it will work for you

How to go from a static navbar to a position:fixed without screwing everything?

I've got problems when going from a normal navbar that just sits in the top side of the browser and disappears when you scroll down to a position:fixed navbar that stays at the top of the browser even when you scroll.
This is the codepen: https://codepen.io/bleah1/pen/gjYBgQ
The problem is that when I add position:fixed and top:0; left:0; right:0; to the .header-container it shrinks and moves the .navigation-bar lower and it pushes the .logo to the left, making it stick to the left side of the browser. I've tried changing some values but I still could not make it work and look good.
Also, the HTML is made kind of in reverse: first for the smaller window size, like phones or tablets and then for the bigger devices.
Full disclosure: These are not my ideas, I saw them on YouTube and I recreated them in an attempt to learn. These are the videos:
https://www.youtube.com/watch?v=FqbOu5ZRFag
https://www.youtube.com/watch?v=Ah_Zitni1y4&
Do you have any idea on what to change to make it work ? Thank you !
/*global $:false */
/*exported formValidationSetup, refreshErrorMessages */
/*jshint unused:false*/
$('.menu-toggle').click(function(){
$('.navigation-bar').toggleClass('navigation-bar--open', 500);
$(this).toggleClass('menu-toggle--open');
});
$(".button").on("click",function(){
$(".input").toggleClass("inclicked");
$(".button").toggleClass("close");
});
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
header{
background-color: #1F2833;
position: relative;
color: #45A29E;
padding: 1em 0;
}
header::after{
content: '';
clear: both;
display: block;
}
body{
font-family: 'Quicksand', sans-serif;
background-color: brown;
margin:0 auto;
/*overflow: hidden;*/
}
.header-container {
position:fixed; /* This creates the problem*/
width:95%; /*changing this to 100% does nothing */
max-width: 1250px;
margin: 0 auto;
backgrounnd-color:#1F2833;
}
.logo {
color:#45A29E;
float:left;
font-size:1rem;
margin: 0;
text-transform: uppercase;
font-weight: 700;
}
.navigation-bar {
position: absolute;
top: 100%;
right: 0%;
background-color: #1F2833;
clip-path: circle(0px at top right);
transition: clip-path ease-in-out 700ms;
}
.navigation-bar--open{
clip-path: circle(150% at top right);
}
.navigation-bar ul {
margin: 0;
padding:0;
list-style: none;
}
.navigation-bar li{
border-bottom: 1px solid #C5C6C7;
}
.navigation-bar li:last-child{
border-bottom: none;
}
.navigation-bar a{
color: #45A29E;
display: block;
padding: 2em 3em 2em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background: #C5C6C7;
color: #0B0C10;
}
.navigation-bar--icon{
display: block;
font-size: 1.5em;
margin-right: 1em;
width:1.3em;
text-align: right;
color: rgba(255,255,255,.25);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content:'';
display:block;
background: black;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.menu-toggle--open .hamburger{
transform: rotate(45deg);
}
.menu-toggle--open .hamburger::before{
opacity: 0;
}
.menu-toggle--open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
.search-container{
display: none;
}
.cover{
background: blue;
height:300px;
width:400px;
}
#media (min-width: 1250px){
.menu-toggle {
display: none;
}
.header-container{
max-width: 1200px;
}
.navigation-bar {
height: auto;
position: relative;
background: #1F2833;
float:right;
clip-path:initial;
}
.navigation-bar li{
display: inline-block;
border: none;
}
.navigation-bar a{
padding:0;
margin-left: 2em;
}
.navigation-bar a:hover,
.navigation-bar a:focus {
background:transparent;
color: rgba(255,255,255,.25);
}
.navigation-bar--icon {
display: none !important;
}
.search-container{
display: inherit;
position: relative;
float: right;
top:-5px;
margin-left: 2em;
}
}
.input{
width: 30px;
height: 30px;
background: none;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.25);
box-sizing:border-box;
outline:none;
transition: width 600ms ease-in-out, border-radius 800ms ease-in-out, padding 200ms;
transition-delay: 300ms;
color:white;
font-size: 16px;
}
.inclicked{
width: 300px;
border-radius: 0;
padding: 0 15px;
padding-right: 40px;
}
.button{
position: absolute;
width:30px;
height:30px;
top:0;
right:0;
box-sizing:border-box;
background:none;
border:none;
outline: none;
cursor:pointer;
}
.button::before{
content:'';
width:3px;
height:15px;
background:rgba(255,255,255,0.25);
position: absolute;
transform: rotate(-45deg);
bottom: -10px;
right: -5px;
transition:500ms;
}
.close::before, .close::after{
content:'';
width:3px;
height: 20px;
background:rgba(255,255,255,1);
position: absolute;
bottom: 5px;
right: 15px;
border-radius: 10px;
}
.close::before{
transform: rotate(-45deg);
}
.close::after{
transform: rotate(45deg);
}
}
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css' rel='stylesheet'>
<link href="navigation-bar.css" type="text/css" rel="stylesheet">
<link href="containers.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Mangacious</title>
</head>
<header>
<div class="header-container">
<h1 class="logo">Mangacius</h1>
<div class="search-container search-container-2">
<form class="search-box" action="index.html" method="post">
<input class="input input-2" type="text" name="search">
<button class="button" type="button" name="button"></button>
</form>
</div> <!--Little Browser Search Bar-->
<nav class="navigation-bar">
<ul>
<li><i class="fa fa-home navigation-bar--icon"></i>Home</li>
<li><i class="fa fa-calendar-check navigation-bar--icon"></i>Today's Uploads</li>
<li><i class="fa fa-list-ol navigation-bar--icon"></i>Top 100</li>
<li><i class="fa fa-store navigation-bar--icon"></i>Store</li>
<li><i class="fas fa-th-list navigation-bar--icon"></i>My List</li>
<li><i class="fas fa-user-cog navigation-bar--icon"></i>User Control Panel</li>
</ul>
</nav> <!-- Navigation Bar -->
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div><!-- Header Container -->
</header>
<body>
<div class="container new-releseas">
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
<div class="cover"></div>
</div><!-- New Releseas -->
<div class="container must-reads">
</div><!-- Must Reads -->
<div class="container current-series">
</div><!-- Current Series -->
<div class="footer-container">
</div><!-- Footer Container -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Check the new Codepen link, I have fixed the position issue
https://codepen.io/nelh/pen/ejOPwE?editors=1100

smooth scroll navigation with active class

I have been working on a smooth scroll navigation bar for a website. I have managed to get the navigation bar to scroll to the different sections within the HTML document, and I been trying to get the navigation bar links to become active depending on the section of the webpage you are on.
After playing around with the code I cannot figure out how to do this. What do I need to do?
This is my code:
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
#import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
font-family: 'Maven Pro', sans-serif;
}
body{
background:fixed
url(images/bright_squares.png) #cccccc;
position:relative;
padding:0;
margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}
background-dark{
background:fixed
url(images/random_grey_variations.png);
}
#navbar {
position:fixed;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
margin: 0;
padding: 0;
list-style: none;
background: #222;
font-family: 'Maven Pro', sans-serif;
font-size: 18px;
font-weight: 300;
}
#navbar li {
position: relative;
float: left;
line-height: 60px;
background: inherit;
text-align: center;
transition: all .2s;
}
#navbar li a {
position: relative;
display: block;
padding: 0 20px;
line-height: inherit;
color: white;
text-decoration: none;
}
#navbar li:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -30px;
width: 60px;
height: 60px;
background: #222;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0, background .2s;
}
#navbar li:hover:before {
margin-top: 1px;
border-radius: 50% 50% 0 50%;
transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
background: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="home">
<h1>Welcome</h1>
<p>Test</p>
</div>
<div id="portfolio">
<h1>portfolio</h1>
<p>Test</p>
</div>
<div id="contact">
<h1>contact</h1>
<p>Test</p>
</div>
<div id="about">
<h1>About Me</h1>
<p>Test</p>
</div>

I think this might answer your question. Just add this code inside the click function you already have.
$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');
You will need to change the home link to #home instead of # though

If you want to forgo all of that, here's the even quicker version.
<script>
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var x = $($(this).children().attr('href')).first().offset().top
$('body').animate({
scrollTop: x
}, 2000);
});
</script>
This will add the scrolling animation I think you're looking for.

Wamp not loading CSS or JS(?)

I have been working on a website just for practice but when I try to open the index.html-file in Wamp(Directory:localhost:index.html) the browser does not seem to load anything but the HTML-file.
It looks exactly the same as when I'm in Atom loading it in the preview-window.
I have double checked the link to the CSS-file in the -tag in index.html. I cant seem to find anything wrong with it. What else could it depend on?
Since I dont own any domains i will post the code here, Ill try to minimize the space.
JS FIDDLE
HTML :
<div class="menu">
<!--Close icon for Menu-->
<div class"icon-close">
Close
</div>
<!--Menu-->
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>123</li>
</ul>
</div>
<!--Main Body-->
<div class="container">
<!--Icon Menu-->
<div class="icon-menu">
Menu
</div>
</div>
CSS :
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
}
/*Basic Styling*/
.container {
background-image: url('http://s3.amazonaws.com/
codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #987;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
/*Not added "icon-menu i" properties*/
JS :
var main = function() {
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.body').animate({
left: "285px"
}, 200);
});
$('.icon-close').click(function() {
$('.menu')animate({
left: "-285px"
}, 200);
$('.body').animate({
left: "0px"
}, 200);
});
};
Thanks!
/Simon

Make navigation bar fixed after scroll

I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. The JSFIDDLE is here. Any help will be greatly appreciated.
Update: I understand that this can't be implemented through CSS & HTML. What would be the best way to implement this?
<section class="main">
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup"><img src="#""></div>
<div id="header"></div></div></div></div></div></div></div>
<div class="whiteboard">
<h1>HELLO GUYS</h1>
</div>
</div>
<div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>
& the CSS
.main{text-align:center;}
h1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
padding: 10px 10px;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#e94f78;
text-decoration: none;
color:yellow;
background-image:url;
}
h1 a{
text-decoration: none;
color:yellow;
padding-left: 0.15em;
}
h2{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
letter-spacing: 8px;
margin-top: 100px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
line-height: 1.45em;
position: scroll;
text-decoration: none;
color:white;
z-index: -9999;
}
h2 a{
text-decoration: none;
color:white;
padding-left: 0.15em;
}
h5{
position: absolute;
font-family:sans-serif;
font-weight:bold;
font-size:40px;
text-align: center;
float: right;
background-color:#fff;
margin-top: -80px;
margin-left: 280px;
}
h5 a{
text-decoration: none;
color:red;
}
h5 a:hover{
color:yellow;
}
#text1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#E94F78;
}
#text1 a{
color:yellow;
text-decoration: none;
padding-left: 0.15em;
}
#text1 a:hover{
text-decoration: none;
cursor:pointer;
}
.whiteboard{
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
background-position: center;
padding: ;
background-color: #fff;
z-index: 1000;
}
.bg{
height:2000px;
background-color:#ff0;
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
position:relative;
z-index: -9999;
}
.bg1{
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
z-index: -9999;
height:1000px;
}
/* Header */
#wrap {
margin: 0 auto;
padding: 0;
width: 100%;
}
#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
#featured h1,
#featured h3,
#featured p {
color: yellow;
text-shadow: none;
}
#featured h4{
color:white;
text-shadow:none;
}
#featured h4 {
margin: 0 0 30px;
}
#featured h3 {
font-family: 'proxima-nova-sc-osf', arial, serif;
font-weight: 600;
letter-spacing: 3px;
}
#featured h1 {
margin: 0;
}
.textwidget{
padding: 0;
}
.cup{
margin-top:210px;
z-index: 999999;
}
.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;background-image:url()}
.scroller{background:#FFF;
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

This "sticky" behavior you are referring to has become popular enough over the web that some people suggested it should be implemented as a CSS property like 'position: sticky' however right now and for the foreseeable future it is impossible to make a "sticky element" without the use of Javascript.
var element = document.getElementById('navBar')
window.addEventListener('scroll', function() {
element.getBoundingClientRect().top < 0 ?
element.classList.add('stuck') :
element.classList.remove('stuck');
});
where in CSS .stuck {position: fixed;}
... something like that

You can do it something like this :
http://jsfiddle.net/ux41b606
HTML:
<div id="image">Some image</div>
<div id="scroller">Some controls</div>
CSS:
body {
height: 3000px;
top: 0;
}
#image {
width: 100%;
background: #444;
height: 50px;
}
#scroller{
height:100px;
background:#ccc;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
JavaScript:
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#scroller').addClass('stuck');
} else {
$('#scroller').removeClass('stuck');
}
});
after scroll 50 px it will change the css of scroller.
this may be a good start

it works for me
window.addEventListener( 'scroll', function() {
// if scroll down after 45px (position Y)
if (window.scrollY > 45) {
document.querySelector('nav').style.position = 'fixed'
document.querySelector('nav').style.top = '0'
} else {
document.querySelector('nav').style.position='none'
}
});