I am using adtile's fixed responsive nav (demo here) for a website. It's working perfectly, except for one thing: I'd like the header background color to be transparent at first and then fade in as you scroll down to the About section. If possible, the header background should have 100% opacity right when the About link color changes. I'm really lost about how to make this work, so any help would be greatly appreciated!
I made a jsfiddle here, but there is a lot of Javascript so it might be easier to look at the repo on GitHub here.
HTML:
<header>
<a href="#home" class="logo" data-scroll>Fixed Nav</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Home</a></li>
<li class="menu-item"><a href="#about" data-scroll>About</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projects</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Fixed Nav</h1>
<p>The code and examples are hosted on GitHub and can be found from here. Read more about the approach from our blog.</p>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="projects">
<h1>Projects</h1>
</section>
<section id="blog">
<h1>Blog</h1>
</section>
CSS:
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
}
a:active,
a:hover {
outline: 0;
}
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
/* ------------------------------------------
DEMO STYLES
--------------------------------------------- */
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
color: #37302a;
background: #fff;
font: normal 100%/1.4 sans-serif;
}
section {
border-bottom: 1px solid #999;
text-align: center;
padding: 100px 0 0;
height: 800px;
width: 100%;
}
h1 {
margin-bottom: .5em;
}
p {
width: 90%;
margin: 0 auto;
}
/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */
header {
background: #f4421a;
position: fixed;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.logo {
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
font-weight: bold;
line-height: 55px;
padding: 0 20px;
color: #fff;
float: left;
}
/* ------------------------------------------
MASK
--------------------------------------------- */
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
#media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.nav-collapse,
.nav-collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
#media screen and (min-width: 40em) {
.nav-collapse {
float: right;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #f4421a;
padding: 0.7em 1em;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #b73214;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
border-left: 1px solid white;
padding: 1.02em 2em;
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */
#font-face {
font-family: "responsivenav";
src:url("../icons/responsivenav.eot");
src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
url("../icons/responsivenav.ttf") format("truetype"),
url("../icons/responsivenav.woff") format("woff"),
url("../icons/responsivenav.svg#responsivenav") format("svg");
font-weight: normal;
font-style: normal;
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
JAVASCRIPT:
There are too many lines of code to fit on Stackoverflow. Please see the Javascript files on GitHub here.
You can definitely use Skrollr to achieve this. However, I hope someone else can find a solution that does not rely on this.
https://github.com/Prinzhorn/skrollr
You can essentially ease opacity/color changes across a set scroll height/position. So it would do what you want perfectly. The demo https://prinzhorn.github.io/skrollr/ has a great example about half-way down the page.
Try making header background initially transparent and add class over header on scroll.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$("header").addClass("darkHeader");
} else {
$("header").removeClass("darkHeader");
}
});
Style new class as per your requirement. Hope this is what you are looking for.
U can do this by JQuery simply first add any class to home link i.e 'home' <li class="menu-item home active"><a href="#home" data-scroll>Home</a></li> then detect on scroll if it is active add class to header
example
$(window).scroll(function(){
if ($(".menu-item.home").hasClass("active")) {
$("header").addClass("default-header")
}else {
$("header").removeClass("default-header")
}
})
than do
.default-header{
// your css code here for default/home section header
}
Related
I am making an app using react and it has gotta nav bar. So the problem is that my h1's and all the stuff are going inside the nav bar - when I mean that I mean that it is going through the nav bar -
<nav class="header">
<a href="" class="logo">
INDUSTRIES
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Text</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
and here is this css
* {
margin: 0;
padding: 0;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
So if ya run this code, you get that the h1's - bmw 4 series is going inside the program. How to fix that?
Please add top: 0 to your header class.
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
}
Please mark as accepted answer if this helps you. It is the tick in my answer.
How can I fix the look of child 1 under dropdown NavBar? Also, how easy is it to change this into a flexbox, and make a button to make the code less cluttered via JavaScript?
I want the #dropDown as the parent navbar item and #child as the child of that navbar item. without a large white space bar (please run the code in full screen to see)
Also, I would like the bar to be visible on mobile. Some elements show up, but the Contact does not show up.
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 240px;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
CSS Nav
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Our Work</li>
<li>
dropDown
<ul>
<li>child 1</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>
I am trying to create a responsive web page navigation bar. I want the logo on the left, the navigation links center, and social media links on the right. When the page width gets too small, it is supposed to hide the navigation links and social media links. This is effectively working correctly however the social media links are jumping below the navigation bar when the page is too narrow but before it reaches full "mobile" width. Also, I am having trouble placing the social links in one line when the hamburger menu is open. I am not a web developer, just a tutorial watcher and any help would be greatly appreciated.
I have tried changing the class type for the .social class but this seems to only make matters worse.
EDIT: I solved the overflow problem by adding "overflow: hidden;" under ".navbar ul{"
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");
navbarToggler.addEventListener("click", navbarTogglerClick);
function navbarTogglerClick() {
navbarToggler.classList.toggle("open-navbar-toggler");
navbarMenu.classList.toggle("open");
}
navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));
function navbarLinkClick() {
if(navbarMenu.classList.contains("open")) {
navbarToggler.click();
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Righteous', cursive;
background-color: #fff;
color: #333;
}
.navbar {
background-color: #000;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
width: 100%;
height: 80px;
line-height: 80px;
font-size: 18px;
padding: 0 30px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.navbar a {
text-decoration: none;
color: #fff;
}
.navbar a.navbar-brand {
float: left;
height: inherit;
line-height: inherit;
padding: 0 30px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 28px;
font-weight: 700;
}
.navbar ul {
float: center;
list-style: none;
height: inherit;
line-height: inherit;
padding: 0 50px;
overflow: hidden;
}
/*Social Stuff*/
.social{
float: right;
background-color: coral;
font-size: 35px;
display: inline-block;
}
/*Social Stuff*/
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 0 30px;
}
.navbar ul li a:hover {
background-color: transparent;
color:#00e713;
transition:0.2s all;
transform:scale(1.2) rotate(10deg);
}
.navbar .navbar-toggler {
display: none;
}
.intro {
width: 100%;
height: 100vh;
background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
background-size: cover;
background-color: #000;
}
.container {
position: relative;
height: 100vh;
color: #fff;
}
.container h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20vh;
}
#html { background-color: #e34f26; }
#css { background-color: #002561; }
#javascript { background-color: #333; }
#media (max-width: 991px) {
.navbar ul {
padding: 0 10px;
}
.navbar ul li a {
min-width: 100px;
padding: 0 20px;
}
#media (max-width: 767px) {
.navbar a.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar {
padding: 0;
}
.navbar ul {
width: 100%;
padding: 0;
background-color: rgba(0,0,0,0.9);
/*height: auto; */
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all ease-in-out 0.3s;
}
.navbar ul.open {
max-height: 100vh;
/*this next line prevents the navbar overlap on mobile */
padding-block-start: 9vh;
}
/*Social Stuff*/
.social{
width: 100%;
float: left;
text-align: center;
}
.social ul li{
display: inline;
float: left;
}
/*Social Stuff*/
.navbar ul li {
width: 100%;
/*border-bottom: 1px solid rgba(255,255,255,0.3); */
}
.navbar ul li a {
padding: 0px;
}
.navbar .navbar-toggler {
display: block;
position: absolute;
height: 40px;
top: 20px;
left: 20px;
background-color: transparent;
color: #fff;
/* border: 3px solid #fff;*/
border: none;
/* border-radius: 4px; */
outline: none;
padding: 0 5px;
cursor: pointer;
}
.navbar .navbar-toggler span,
.navbar .navbar-toggler span::before,
.navbar .navbar-toggler span::after {
display: block;
content: '';
background-color: #fff;
height: 3px;
width: 28px;
border-radius: 4px;
transition: all ease-in-out 0.3s;
}
.navbar .navbar-toggler span::before {
transform: translateY(-8px);
}
.navbar .navbar-toggler span::after {
transform: translateY(5px);
}
.navbar .navbar-toggler.open-navbar-toggler span {
/* transform: rotate(90deg); */
background-color: transparent;
/* transform: scale(0.85) rotate(270deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::before {
transform: translateY(0px) rotate(45deg);
/* transform: translateY(0px) scale(0.75) rotate(45deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::after {
transform: translateY(-3px) rotate(-45deg);
/* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Navbar</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar">
<button class="navbar-toggler">
<span></span>
</button>
<a href="#" class="navbar-brand">
<span>T</span>e<span>m</span>P</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<div class="social">
<li><i class ="fa fa-twitch"></i></li>
<li><i class ="fa fa-reddit"></i></li>
<li><i class ="fa fa-twitter"></i></li>
<li><i class ="fa fa-youtube"></i></li>
</div>
</ul>
</nav>
<script src="assets/js/script.js"></script>
</body>
<p>
</p>
</html>
First, you should decide your layout at what breakpoint you want to change the layout of navigation based on that we can write your styles within those media queries. Those things which you don't need on the mobile layout such as social links you can simply make display: none; to the social section but only in the mobile media query.
Actually your HTML structure is messy but anyhow, update this style in media query #media (max-width: 767px)
.social li {
width: auto;
margin-right: -18px;
float: none
}
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)
I want to add a fadeIn/Out effect on a toggle class when navigation is open and close. Somebody know how? I'm using the toggle class because of a responsive problem i had before when resizing part of the navigation disappeared.
FIDDLE example
nav ul.show {
display: block;
}
And for the javascript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
I prefer using css transitions these days over jquery animations. To me that appears more clear and easier to read, since logic and visualization are more separate. In the end the action is not the fading, but the change of state (or class in this case). The fading effect is a pure optic gimmick.
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
Try this: Demo
// Show navigation //
$(function() {
$('.nav-btn').click(function(event) {
// alert();
if($('nav > ul').hasClass("show"))
{
// alert();
$('nav > ul').fadeOut(1000, function() {
$('nav > ul').removeClass('show');
});
} else {
//alert('no class');
$('nav > ul').fadeIn(1000, function() {
$('nav > ul').addClass('show');
});
}
});
});
/************************************************
Site Name:
Author:
************************************************/
html, body {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 22px;
line-height: 26px;
color: #222;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
strong, b {
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
h1 {
font-weight: bold;
font-size: 18px;
line-height: normal;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 0 0 25px 0;
}
h2 {
font-weight: normal;
font-size: 18px;
line-height: normal;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 0 0 0 0;
}
p {
margin: 0 0 25px 0;
}
p a {
color: #222;
text-decoration: underline;
}
p a:visited {
text-decoration: underline;
}
p a:hover {
text-decoration: none;
color: white;
background-color: #111;
}
.tag {
font-size: 14px;
text-transform: uppercase;
margin: 0 0 0 0;
}
/************************************************
Header - Navigation
************************************************/
header {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 9999;
background-color: white;
}
/* Navigation */
.nav-btn {
display: none;
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 60px;
z-index: 9999;
background: url(../elements/nav-icon.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: red;
}
.nav-btn:hover {
background: url(../elements/nav-icon-hover.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: blue;
}
nav {
margin: 0 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
}
nav li {
position: relative;
float: left;
margin: 0;
padding: 0;
background-color: transparent;
}
nav a,
nav li a {
display: block;
font-size: 25px;
font-weight: bold;
color: #111;
line-height: 61px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
height: 60px;
padding: 0;
margin: 0 10px;
background-color: rgba(255,255,255,0.9);
}
nav a:hover,
nav li:hover a {
color: #aaa;
}
nav ul.show {
display: block;
}
/*nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #aaa;
}*/
.col-nav,
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
/************************************************
Responsives
************************************************/
/*#media all and (min-width: 1601px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1201px) and (max-width: 1600px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1001px) and (max-width: 1200px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 0px) and (max-width: 400px) {
}
*/
#media all and (min-width: 1000px) {
.class_test{
display:block !important;
}
.home{
display:none;
}
}
#media all and (min-width: 801px) and (max-width: 1000px) {
.col-25 {
width: 33.33333%; }
}
#media all and (min-width: 601px) and (max-width: 800px) {
.col-25 {
width: 50%; }
}
#media all and (min-width: 0px) and (max-width: 600px) {
nav {
margin: 0 10px;
}
#container {
margin-left: 10px;
margin-right: 10px;
}
.col-25 {
width: 100%; }
}
#media all and (min-width: 0px) and (max-width: 1000px) {
nav ul {
display: none;
top: 60px;
}
/*nav:hover ul {
display: block;
}*/
.nav-btn {
display: block;
}
.home {
width: 220px;
margin: 0 auto;
}
.col-nav {
width: 100%; }
}
.nav ul {
transition: display .3s;
}
.nav ul.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<nav>
<div class="col-nav">
Untitled
</div>
<ul class="class_test">
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item3</li>
</ul>
</nav>
</header>
Use fadeToggle() method in jquery
you can refer the other methods also here
Hope this helps
try this.
http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
jquery:
$(#divID).toggleClass('yourClass').fadeOut('slow');