We Keep Coding

Prevent sub-menu from moving down

I created a navbar using CSS and HTML. To that, I have added a sub-menu that opens when hovered over elements of "nav-list". I want the position of the sub-menu to be fixed since I want it to be one place irrespective of which element is hovered. The problem is I used sticky to fix the position of the navbar too. And when I scroll down while the submenu is open, it moves down too. How do I stop this?
<ul class="nav-list" >
<li>
Category
<ul class="sub-menu" id="sub-menu">
<li>shirts </li>
<li>Shorts</li>
</ul>
</li>
<li>
Ultra
<ul class="sub-menu">
<li>shirts </li>
<li>Shorts</li>
<li>Accessories</li>
<li>Shoes</li>
</ul>
</li>
</ul>
</nav>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
/*Code for Sticky*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .notice{
padding-top: 60px;
}
nav{
display: inline-flex;
width: 100%;
}
.nav-list{
display: flex;
width: 100%;
margin-top: .7rem; /*Use this to change the postition of dropdown*/
padding-left: 1.1rem; /*Use this to move the dropdown left and right*/
}
.nav-list li{
position: relative;
}
.nav-list > li > a{
color: black;
display: block;
font-size: 1rem;
padding: 1.3rem 1rem;
text-transform: uppercase;
transition:0.1s color 300ms;
}
.sub-menu {
display: flex;
position:fixed;
box-sizing: border-box;
background-color: black;
visibility:hidden;
top: 1.5rem; /*push up */
left: -2rem;
width: 82.5rem;
height: 35rem;
}
.sub-menu a{
position: relative;
top: 2rem;
color: white;
font-size: 1.1rem;
font-weight: 200;
padding: 3rem 40px 0 40px;
}
.sub-menu a:hover{
color: #7e7978;
}
.nav-list li:hover > .sub-menu {
visibility: visible;
opacity: 1;
}

Responsive Navigation Not Showing All Items

Hello I am currently learning responsive design and I am trying to make a responsive navigation bar which turns in to a menu when visited on a phone or mobile device! Everything works except not all the navigation items show on the mobile device and I am not sure why! This is the code:
<div class="container">
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> RONNIE<b>GURR</b></li>
<section class="div_navbar_items">
<li class="navbar_items"> HOME </li>
<li class="navbar_items"> ABOUT US </li>
<li class="navbar_items"> GALLERY </li>
<li class="navbar_items"> SHOP </li>
<li class="navbar_items"> CONTACT </li>
</section>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<script src="js/responsive.js"></script>
Here is the CSS:
.container {
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
margin-top: 50px;
font-family: 'Cabin', sans-serif;
font-size: 1.3em;
color: white;
font-weight: 700px;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
/*Start of mobile nav*/
#media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/*End of mobile nav*/
And here is the JS:
function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
codepen: https://codepen.io/anon/pen/JyEoWY

I think this will get you in the right direction, then you can decide upon what you'd like to do from here. You are setting your navbar to be 100vh, which is 100% height of the screen, so you need to make sure your padding and margin on your nav elements aren't so much. Try removing any margin and padding from these two styles, then adapt it on your own from here. If you don't want to change this stuff, refer to the second part of my answer, and just make the nav scrollable.
.navbar li a {
margin-top: 0px;
}
#media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
display: block;
padding: 0px;
font-size: 25px;
}
}
Also, if you look in .navbar styling (line 8 of your codepen) you have it set to overflow: hidden. You can update your .navbar.responsive class with overflow of scroll to get it to work.
#media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
overflow: scroll; // Set overflow to scroll
}
}

I guess this happenes because you make .navbar.responsive {
position:fixed;
And you just can't watch all content of block, because it's not allow to scroll. When i change this property to absolute, i looked all items of menu.
By the way, you write CSS property font-weight with px, font-weight: 700px, but it shouldn't be px, it's relative value: font-weight: 700

Additional Navigation bar on click

I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know

Hide fixed header on scroll down, show on scroll up and hover version 2 please

I know that this question has been asked here before, but i don't really like the way it is scripted and looks unstable when running.
I would like the following:
Hide header on scroll down with a fadeout
Show header on scroll up with a fadein
Show header on hover
I decided not to show some of the js from the other examples, because people intend to work on those, but they don't work that good.
Hope someone can help must be easy for a coder.
--> FIDDLE
Html:
<header>
<nav>
<div class="mob-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
</ul>
</nav>
</header>

Use the scroll function in jQuery like this -
$(document).ready(function(){
var iScrollPos = 0;
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
$('header').fadeOut(500);
} else {
$('header').fadeIn(500);
}
iScrollPos = iCurScrollPos;
});
});
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box; /* width and height value includes content, padding and border not the margin */
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* remove highlight on touch devices */
-webkit-tap-highlight-color: transparent;
}
html {
position: relative;
min-height: 100%; /* sticky footer */
overflow-y: scroll;
height: 2500px;
}
body {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
letter-spacing: 1px;
color: #000;
}
body, input, textarea, select, button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 9999;
background-color: #eee;
}
.mob-nav {
display: none; /* hide mobile nav */
}
nav ul.left-nav {
float: left;
}
nav ul.right-nav {
float: right;
}
nav {
position: relative;
padding: 0 5px;
}
nav ul {
list-style: none;
font-size: 0; /* remove default spacing */
}
nav li {
display: inline-block;
}
nav a {
display: block;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
text-align: center;
text-decoration: none;
background-color: transparent;
padding: 0 10px;
line-height: 44px;
}
nav a:link,
nav a:visited {
color: #111;
text-decoration: none;
}
nav a:hover,
nav a:active {
color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<div class="mob-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
</ul>
</nav>
</header>

Try this..
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
$('header').fadeOut(500);
}
else {
$('header').fadeIn(500);
}
previousScroll = currentScroll;
});
}());

Just tried working if want to hide until top scroll try this :
(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
$('#menu-bar').fadeOut(0);
}
else {
$('#menu-bar').fadeIn(0);
}
});
}());

Double click to reduce size of div?

Hi I was just wondering if there was a way of double clicking on a div and making the height reduce just by using CSS.
<div class="container"></div>
<ul class="accordion">
<li>
First
<div class="accordion-content" id="first">
<p>Bonjour</p></div>
</li>
<li>
Second
<div class="accordion-content" id="second">
<p>Hello</p></div>
</li>
<li>
Third
<div class="accordion-content" id="third">
<p>No</p></div>
</li>
You can find the code that I want to adjust in this Fiddle.

This is achievable in CSS only, if you can add the following HTML immediately after each <div class="accordion-content">:
<input>
Then add these styles:
.accordion-content {
position: relative;
}
.accordion-content a, .accordion-content input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.accordion-content input:focus {
z-index: -1;
}
.accordion-content a:focus {
z-index: 1;
}
Fiddle

Note: Please don't actually use this. It's an interesting way to go about what you want, and a fun challenge for me, but Javascript is by far a more appropriate and reliable tool for the job. Unless you are burdened with a client who is demanding this functionality while completely against the use of JS, just slap some jQuery on it and call it a day.
So, I couldn't figure out how to do this with only CSS using the ul in your current markup, but if you're open to changing it a little bit, you can do this with CSS only. I'm dumb and just needed to plug the code below into the ul element. Here is an example:
HTML
<ul class="accordion">
<li>
<span class="span" tabindex="0">
<input type="text" value=" " readonly="true" />
Show
</span>
<p id="showme" class="alert">Hidden Content</p>
</li>
</ul>
CSS
body {
font: 1em'Source Sans Pro', sans-serif;
}
.accordion {
width: 100%;
padding:0;
margin:0;
list-style-type: none;
}
span {
display: block;
padding: 15px 20px;
background: #bbb;
color:#fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
span a {
text-decoration: none;
}
span a:visited {
color:#fff;
}
.alert {
display: none;
margin: 20px;
}
span {
position: relative;
}
span a {
position: relative;
z-index: 2;
}
span a:hover, span a:active {
z-index: 4;
}
span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%;
height: 301%;
z-index: 3;
}
span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
#showme:target {
display: block;
}
Fiddle: https://jsfiddle.net/yn13syuj/
Essentially, what this does is cover the a tag using some z-index trickery until you click it once. Then, once it's uncovered, you can use :target to change the display property of the hidden content.

Using only css you can't handle double click events, Use JavaScript and .ondblclick function to do this, here's a DEMO of your code:
var divs = document.getElementsByClassName("accordion-content");
for (var i = 0; i < divs.length; i++) {
divs[i].ondblclick = function() {
if (this.offsetHeight > 50) {
this.style.height = this.offsetHeight - 20 + "px";
}
};
}
body {
font: 1em'Source Sans Pro', sans-serif;
}
.container {
width: 100%;
max-width: 400px;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.accordion-header {
display: block;
padding: 15px 20px;
background: #bbb;
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
.accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: height 400ms ease;
transition: height 400ms ease;
}
.accordion-content p {
margin: 20px;
}
.accordion-content:target {
height: 150px;
overflow-y: scroll;
}
<div class="container"></div>
<ul class="accordion">
<li> First
<div class="accordion-content" id="first">
<p>Bonjour</p>
</div>
</li>
<li> Second
<div class="accordion-content" id="second">
<p>Hello</p>
</div>
</li>
<li> Third
<div class="accordion-content" id="third">
<p>No</p>
</div>
</li>
</ul>
It keeps decreasing the height until it reachs 50 px, you can change it to fit your needs.
And here's your updated Fiddle.