Develop Reference

The code for my navbar does not work properly

I'm a beginner trying to code a navbar in a practice website but I can't get the final product right.
My navbar is supposed to line up horizontally along the top of the page and then be follow the page as you scroll with a black shadow backdrop. Currently when you load the page, the words line up vertically on the right side, and then condense when you scroll. I also have a logo in the top left that shrinks way too small. Finally, when when you shrink the page, a hamburger icon pops up in the top right that is supposed to show you the menu options, however it no longer works. It's like a cycle with this page, I fix one thing and break another. I am doing this just for fun because I'm trying to learn but now I'm getting frustrated, Thanks!
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
$(document).ready(function() {
$(".menu i").click(function() {
$("nav ul").toggleClass("active")
})
})
#import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Hairline|Oswald|Raleway&display=swap');
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .5s;
}
nav.black {
background: rgba(0, 0, 0, .8);
height: 80px;
padding: 10px 50px;
}
nav.logo {
float: left;
}
nav .logo img {
height: 80px;
transition: .5s;
}
nav.black .logo img {
padding: 20px;
height: 60px;
}
nav ul {
float: right;
margin: 0;
padding: 0px;
display: flex;
text-shadow: 2px 2px 4px #000000;
}
nav ul li {
List-style: none;
}
nav ul li a {
Line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Raleway', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: .5s;
}
nav.black ul li a {
color: #fff;
Line-height: 20px;
}
nav ul li a.active,
nav ul li a:hover {
color: #fff;
background: #008cff;
}
.responsive-bar {
display: none;
}
#media (max-width: 800px) {
.responsive-bar {
display: block;
width: 100%;
height: 60px;
background: #262626;
position: fixed;
top: 0;
Left: 0;
padding: 5px 20px;
box-sizing: border-box;
z-index: 1;
}
.responsive-bar .logo img {
float: left;
height: 50px;
}
.responsive-bar .menu i {
float: right;
color: #fff;
margin: 0;
padding: 0;
Line-height: 50px;
cursor: pointer;
text-transform: uppercase;
}
nav {
padding: 60px;
}
nav.black {
display: none;
background: #262626;
height: 60px;
padding: 0;
}
nav .logo {
display: none;
}
nav ul {
position: absolute;
width: 100%;
top: 60;
Left: 0;
background: #262626;
float: none;
display: none;
}
nav ul.active {
display: block;
}
nav ul li {
width: 100%
}
nav ul li a {
display: block;
padding: 15px;
width: 100%;
height: 60px;
text-align: center;
Line-height: 30px;
color: #fff;
}
}
* {
box-sizing: border-box;
}
.main {
height: 1000px;
padding-left: 20px;
padding-right: 100px;
}
<div class="responsive-bar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<i class="fa fa-bars"></i>
</div>
</div>
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<ul>
<div class="active">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="main">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Why is hamburger sub menu navigation not opening?

Relevant code is below, full code is here. The code for the nav follows this pen: https://codepen.io/taniarascia/pen/dYvvYv and all styles/scripts/html are right. I don't know what caused the services dropdown to not push down the following li elements in mobile view. The drop down worked when I first put it on my site but after messing with a few things seemingly unrelated it does not work and I have no idea at this point what happened. Inspector shows that all the right styles are being applied, and that no extra styles are being applied.
HTML
<div class="main_nav">
<div class="navigation">
<div class="nav-container">
<div class="brand">
<img src="assets/images/logo.svg" style="height: 100%;">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<!--<li>-->
<!-- Web Development-->
<!--</li>-->
<!--<li>-->
<!-- Graphic Design-->
<!--</li>-->
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</nav>
</div>
</div>
</div>
CSS
#charset "UTF-8";
.main_nav {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 10;
width: 100vw;
/* padding-top: 17px; */
background: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
/* padding-bottom: 6px; */
left: 0;
right: 0;
height: 70px;
padding: 10px 4px;
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.main_nav {
padding-top: 25px;
}
}
.sticky {
background-color: #ffffff;
opacity: 1;
top: 0px;
}
.navigation {
height: 50px;
background: #ffffff;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
height: 50px;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
/* width: 40%; */
}
.brand a,
.brand a:visited {
color: #5fc3e4;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: white;
}
nav ul li {
float: left;
position: relative;
height: 50px;
line-height: 50px;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 50px;
background: #ffffff;
color: #5fc3e4;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
color: #cfcfcf;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #ffffff;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #5fc3e4;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
JS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery

You have other js errors in the console.
For example:
pen.js:11 Uncaught ReferenceError: $ is not defined
at pen.js:11
And this stops the code coming after it from executing.
Once I cleaned those up (there were 2 or 3), the hamburger started working:
https://codepen.io/lennart_rikk/pen/ZVqJVZ
(NB! In css I changed the main nav opacity to 1, to see the menu)

Transparent header on scroll to full colour - Nav overlay issue

Currently my site has a transparent navbar when on scroll will change to full colour. The issue i am having is that the navbar also switches colour when the page is scrolled on the fullscreen navigation.
How can i stop the navbar switching colour when the fullscreen navigation is open? Would i need to change me JS?
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar").css("background-color", "#dedede");
} else {
$(".navbar").css("background-color", "transparent");
}
})
});
body {
background: black;
}
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #fff;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #ffffff;
}
.btn-close:after {
color: #fff;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #ffffff;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0, 0.96);
}
.overlay .menu {
margin: 15% auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 50%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #ffffff;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)">
<span>MENU</span>
</a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Branding</li>
<li class="description"><span>Brand Development, Logos, Point, Point</span></li>
<li>Digital</li>
<li class="description"><span>Website Design, Website Development, Point, Point</span></li>
<li>Print</li>
<li class="description"><span>Business Cards, Leaflets, Point, Point</span></li>
<li>Packaging</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Infographics</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>About</li>
<li class="description"><span>About Company</span></li>
<li>Work</li>
<li class="description"><span>Examples & Case Studies of our work</span></li>
<li>Contact</li>
<li class="description"><span>Get in touch with us to get your project started</span></li>
</ul>
</li>
<li id="social">
<ul class="contact">
<p class="email">info#company.com</p>
<p class="tel">01234 566545</p>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
https://codepen.io/whitinggg/pen/bLzxGG

You can stop the navbar switching color when the fullscreen navigation by small editing in your script like this
change your script like this
$(document).ready(function () {
$(".menu-btn a").click(function () {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if( $(this).hasClass('btn-close') ) {
$(".navbar").css("background-color", "transparent");
}
else if( scroll > 100) {
$(".navbar").css("background-color", "#dedede");
}
});
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#dedede");
}
} else {
$(".navbar").css("background-color", "transparent");
}
});
});

You may consider adding an !important to the background style in order to always keep it transparent:
.navbar.fixed-top {
background:transparent!important;
}

Scroll Nav in Wordpress not working

I want to create a 'scroll-nav' for my website. So I separated 2 Navs and added some jquery:
<nav class="main-nav clearfix">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
<nav id="scroll-nav" style="display:none">
<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
</nav>
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
But it´s not working. Do I have to do something different because of WordPress? It tested it in a normal html, it works fine there.

You are putting clearfix like ID when you have to do it in class attribute.
<nav id="scroll-nav" class="clearfix" style="display:none">
And put your
$(window).scroll(function() {
if ($(window).scrollTop() > 50 ){
$('#scroll-nav').css('display', 'block');
} else {
$('#scroll-nav').css('display', 'none');
};
});
into
$(document).ready(function(){
});

#import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500);
nav {
background: #333;
overflow: auto;
padding: 60px;
position: relative;
z-index: 2;
}
ul {
text-align: center;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
display: block;
padding: 5px 10px;
margin: 0 10px;
color: #eee;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 14px;
line-height: 32px;
font-weight: bold;
transition: all 200ms linear;
}
nav a:hover,
nav#small a:hover {
color: #C18055;
background: #fff;
}
nav#small {
background: #fff;
padding: 20px 40px;
position: fixed;
box-sizing: border-box;
width: 100%;
top: 0;
z-index: 1;
box-shadow: 0px 2px 2px #fff;
}
nav#small h1,
nav#small a {
color: #333;
}
nav#small h1 {
font-size: 38px;
}
nav#small h1>a {
color: #C18055;
}
nav#small h1>a:hover {
color: #3ab4a6;
}
div#content {
height: 2200px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0;
opacity: 0.9;
}
div#content h2 {
color: #fff;
font-weight: bold;
transform: rotate(-10deg);
line-height: 60px;
font-size: 48px;
text-transform: uppercase;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 10%;
bottom: 10%;
text-shadow: 2px 2px 2px #333;
font-family: 'Pacifico', cursive;
}
div#content h2:before {
display: inline-block;
background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0;
background-size: cover;
width: 239px;
height: 200px;
content: "";
transform: rotate(-80deg);
margin-bottom: 40px;
}
#media (max-width: 700px) {
nav {
padding: 20px;
}
nav h1 {
display: block;
float: none;
text-align: center;
padding: 20px;
}
nav ul {
float: none;
padding: 20px;
}
div#content h2 {
width: 30%;
}
nav#small {
padding: 20px;
}
nav#small ul {
padding: 5px;
}
nav#small h1 {
padding: 10px;
font-size: 28px;
margin-bottom: 5px;
}
nav#small a {
font-weight: normal;
}
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<nav id="small">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="content">
<h2>Scroll!</h2>
</div>
Would you please check my above snippet?

CSS transition inline menu

I need to do inline menu with transition.
I tried to recode some example into my requirement, but I have a problem with a:hover class - maybe some problem in js class.
But I have no idea how to get a red background under the main link (dropdbtn class) while I scrolling to submenu.
$(document).ready(function() {
console.log("ready!");
$(".dropdown-content").mouseenter(function() {
$(this).prev().addClass('href-hovered');
})
$(".dropdown-content").mouseleave(function() {
$(this).prev().removeClass('href-hovered');
})
});
.nav {
width: 1200px !important;
height: 50px;
padding-bottom: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
}
.nav a.dropbtn {
display: block;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
}
.nav a.dropbtn:hover {
display: block;
//padding:20px 40px;
line-height: 1.5em;
color: #BCF1F3;
font-family: 'webfont';
font-size: 1.5em;
width: 170px;
background: red;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
.dropdown {
float: left;
background: white;
position: relative;
width: 170px;
min-height: 50px;
}
.dropdown > a {
color: black;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown > a:hover {
color: black;
background: red;
display: block;
padding: 12px 24px;
text-decoration: none;
}
.dropdown .dropdown-content {
position: absolute;
transform: translate3d(0, -100%, 0);
transition: transform .2s ease-in;
z-index: -1;
left: 0;
}
.dropdown:hover .dropdown-content {
transform: translate3d(0, 0, 0);
transition-duration: .4s;
transition-timing-function: ease-out;
z-index: 1;
}
.dropdown-content {
background: red;
list-style: none;
width: 170px;
white-space: nowrap;
}
.dropdown-content a {
display: block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
z-index: 100 !important;
}
.nav .red {
color: #ff6600;
font-family: 'webfont';
font: 1.8em;
}
.nav .green {
color: #00cccc;
font-family: 'webfont';
}
.nav a:hover .red {
color: white;
padding-top: 20px;
font-family: 'webfont';
}
.nav a:hover .green {
color: white;
font-family: 'webfont';
}
.nav a.dropbtn.href-hovered .green {
color: white;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a.dropbtn.href-hovered .red {
color: white;
padding-top: 20px;
z-index: 2;
font-family: 'webfont';
background: red;
width: 170px;
height: 50px;
}
.nav a:hover .red,
a:hover .green {
color: white;
font-family: 'webfont';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<ul>
<li class='dropdown'><a class="dropbtn" href="#"><span class="red">nav</span><br><span class="green">1</span></a>
<ul class="dropdown-content">
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
<li>Sub_nav
</li>
</ul>
</li>
</ul>
<nav>

As Mihailo said, your menu is kind of chaotic and overly complex. But to achieve your requirement, just change the style definition
nav a.dropbtn:hover
to
nav:hover a.dropbtn
to have the rule applied when the nav block itself is hovered.

Just added background-color: red; to .nav a.dropbtn. If im correct in understanding this is what you want right?