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)
Related
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'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>
I have a problem with side navigation bar. When i clicked on sub menu link menu goes hide. But I want to open always when i clicked on sub menu link. It goes hide when main menu clicked.
My code below:
$(document).ready(function() {
$('#menu li > a').click(function(e) {
$(this).addClass("selected");
if ($(this).next('ul').length > 0) {
e.preventDefault();
var subNav = $(this).next('ul');
if (subNav.is(':visible')) {
subNav.slideUp('normal')
} else {
$('#menu ul:visible').slideUp('normal');
subNav.slideDown('normal');
$("a.selected").removeClass("selected");
$(this).addClass("selected");
}
}
});
$('.nav-trigger').click(function() {
$('.side-nav').addClass('visible');
});
});
.side-nav.visible {
display: block;
}
.side-nav {
position: absolute;
width: 100%;
height: 100%;
background-color: #2e3e4e;
z-index: 99;
display: none;
overflow-y: auto;
}
.side-nav #menu {
margin: 0;
padding: 0;
}
.side-nav #menu ul {
display: none
}
.side-nav #menu,
.side-nav #menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.side-nav #menu>li {
background-color: #2e3e4e;
list-style: none;
position: relative;
}
.side-nav #menu>li>a {
padding: 16px 16px;
border-bottom: 1px solid #3A4B5C;
width: 100%;
display: block;
text-decoration: none;
color: #f2f2f2;
font-size: 1.2em;
}
.side-nav #menu li a:hover {
color: #ccc;
text-decoration: none;
}
.side-nav #menu li ul li a {
background-color: #384858;
color: #fff;
width: 100%;
display: block;
padding: 16px 16px;
border-bottom: 1px solid #2e3e4e;
text-decoration: none;
}
.side-nav #menu li ul li a:hover {
color: #2addd4;
text-decoration: none;
background-color: #2e3e4e;
}
.side-nav #menu li ul li a::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.side-nav #menu li ul li a:hover::before {
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
content: "\f0da";
font-family: FontAwesome;
left: 0px;
position: relative;
top: 0;
background-color: transparent;
}
.selected {
z-index: 9999;
border-left: 2px;
}
.side-nav ul li a:hover:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
.side-nav ul li a.selected:after {
content: '';
position: absolute;
width: 4px;
height: 100%;
top: 0;
left: 0;
background-color: #2addd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav">
<nav>
<ul id="menu">
<li>
<span><i class="fa fa-dashboard"></i></span> <span>Dashboard</span>
<ul>
<li>page1</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>User Page</span>
</li>
<li>
<span><i class="fa fa-user"></i></span> <span>Admin Page</span>
<ul>
<li>adminpage 1</li>
<li>adminpage 2</li>
</ul>
</li>
</ul>
</nav>
</div>
I don't know how much of this code is necessary to show you, but I honestly can not figure out how to fix my problem so I'll just list it all. I have a dropdown menu for my mobile version of my site that is ALMOST complete. This is what it looks like when I pull up the menu (menu div):
Home
About
Contact
My problem now is the sub-menus. When I click on them I see something like this (empty space at top of li ul and next menu item covered up):
Home
<---empty space
My dropdown li
My dropdown li 2
My dropdown li 3
Contact
I've tried messing with margins, I've tried changing around display types, I've tried changing position types... The closest I've come to getting it to work correctly is to use a negative margin on the li ul to get rid of the empty space, but it still covers up the "about". I just don't understand what I can do to fix the css! Any help is greatly appreciated!!
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
}
li ul li {} li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li
</li>
<li>My Dropdown li 2
</li>
<li>My Dropdown li 3
</li>
</ul>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
You hava top value (top: 51px;) on ul which is inheriting to your sub-menus. Add top: 0; to li ul so that isn't iniherited on sub-menus.
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
top: 0;
}
li ul li {}
li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li</li>
<li>My Dropdown li 2</li>
<li>My Dropdown li 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
</script>
I'm trying to write slide panel navigation. My backward button is not working. Here I'm including my working file on js-fiddle. And also please note that The "ABOUT" page have child element.
Click to get fiddle
Please help me to come back on its previous stage, when click on the "Close" button.
try this...
$(".back").on('click', function(){
$(".main-navigation").removeClass("open-panel");
});
This is some what from your desired output
$(document).ready(function() {
$(".main-navigation ul").prepend("<li class='back'><a href='#' title='Close'>close</a></li>");
$(".menu-trigger").click(function() {
$(".main-navigation").addClass("open-panel");
});
$(".main-navigation li").click(function() {
$(".main-navigation li ul").addClass("open-panel");
});
$(".main-navigation li").has("ul").addClass("sub-child");
$(".back").on('click', function() {
$("#mainNav").removeClass().addClass('main-navigation');
$("#mainNav ul li ul").removeClass();
});
});
.top-header {
background-color: #3173d0;
color: #fff;
font-size: 1rem;
min-height: 40px;
padding-top: 8px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.top-header .menu-trigger {
background-color: #103669;
color: #fff;
height: 40px;
left: 0;
position: absolute;
;
text-align: center;
top: 0;
width: 40px;
}
/* Mobile Sliding Panel Section */
.main-navigation {
background-color: #103669;
color: #fff;
left: -100%;
min-height: 100%;
position: absolute;
text-transform: capitalize;
top: 0;
z-index: 2;
}
.main-navigation:after,
.main-navigation:before {
content: '';
display: table;
}
.main-navigation:after {
clear: both;
}
.main-navigation ul {
background-color: #103669;
display: block;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 220px;
}
.main-navigation ul ul {
left: -100%;
}
.open-panel {
left: 0 !important;
transition: all ease 0.4s;
-o-transition: all ease 0.4s;
-webkit-transition: all ease 0.4s;
}
.back {
position: relative;
}
.close-panel {
left: -100%;
}
.main-navigation ul {
display: block;
}
.main-navigation ul li {
border-bottom: #2258a4 solid 1px;
display: block;
}
.main-navigation a {
color: #fff;
display: block;
font-size: 0.8125rem;
padding: 10px 15px;
text-align: left;
}
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
html {
font-size: 16px;
}
body {
background-color: #fff;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 0.875rem;
}
a {
color: #4b4b4b;
text-transform: capitalize;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
ul:after,
ul:before,
li:after,
li:before {
content: '';
display: table;
}
ul:after,
li:after {
clear: both;
}
ul,
li,
h1,
h2 {
margin: 0;
padding: 0;
}
button,
input[type=submit],
input[type=reset] {
border: none;
cursor: pointer;
}
<section class="top-header">
sliding panel demo
<button class="menu-trigger"><i class="fa fa-bars"></i></button>
<nav class="main-navigation" id="mainNav">
<ul>
<li>home</li>
<li>about us
<ul>
<li>company</li>
<li>vision</li>
<li>mission</li>
</ul>
</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
The problem is you add $(".main-navigation li").click() class in this and $(".back") here you removed it so it performs both and got wrong output on second time when you close child menu also n reopen it.Do work on it..I suggested 50% solution :)