Smart Phone Fixed Nav Bar Not Closing after selection

Smart Phone Fixed Nav Bar Not Closing after selection - javascript

I have got some great info from this forum and this is my first question so be nice..
I have a top nav bar which is fixed.
The fixed part seems to be working fine but i now have two issues.
In responsive mode when you click the hamburger icon it opens beautifully and you can jump to any anchor on the page ( i am designing a 1 page site). But the nav wont close upon click or tap so i am left with a gaping open nav.
Second problem is when the nav is fixed and i scroll down and go over a form the form fields are displayed on top of the nav bar, in both 960 width & responsive.
I have attached what i think is the code here and any advice would be greatly appreciated.
Cheers
Max
This is the html:
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul>
<span style="color:white">Menu</span>
This is the css:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
This is the java script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>

For first question add this js:
$('nav li>a').on('click', function (e) {
if($(window).width()<600){
menu.slideUp();
}
});
the full code is below:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$('nav li>a').on('click', function(e) {
if ($(window).width() < 600) {
menu.slideUp();
}
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('../images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
<nav class="clearfix">
<ul class="clearfix">
<li><span style="color:white">Home
</li>
<li><span style="color:white">Book
</li>
<li><span style="color:white">Join
</li>
<li><span style="color:white">Contact
</li>
</ul> <span style="color:white">Menu</span>
</nav>
ul>li>a can be changed with a ID or class as you prefer.
For 2nd question add this css:
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
z-index: 99;
}
DEMO

Related

Is there any way I can hide my modal when the page is opened

So I was creating a website and I decided to make a modal type form using only Html, CSS, and js... I followed the tutorial and completed it..but now I am stuck...Every time the page opens or reloads, the modal pops up... I only want it to pop up when I click the login button ... Is there any way I can do this...any help would be appreciated...Here's the code
Html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<!-- {% load static %} -->
<link rel="shortcut icon" href="https://lh3.googleusercontent.com/a-/AOh14Gib1NYf2ZSICywbbqOUXh6laaEP1NJYCj18Mz-jBg=s96-c-rg-br100" type="image/jpg" />
<link rel="stylesheet" href="../static/Css/home.css" />
<script src="https://kit.fontawesome.com/fb5fc8c33b.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script defer src="../static/Js/home.js"></script>
</head>
<body>
<nav>
<ul>
<li class="logo">
<img src="../static/Images/Precious-san.jpg" />
</li>
<li class="responsive-bar"><span class="fas fa-bars"></span></li>
<div class="nav-lists">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="search-box">
<input type="search" placeholder="Search" autocomplete="off" />
<label class="search-icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class='losn'>
<button id='login-btn' onclick='showLoginForm' ><a>Login</a></button>
<p>or</p>
<button id='signup-btn' >Sign up</button>
</div>
<div class='login-bg' >
<div class='login-content' >
<div class='close' onclick='hideLoginForm()' >+</div>
<h3>Login</h3>
<input type='email' placeholder='Email' id='email'><br>
<input type='password' placeholder='Password' id='password'><br>
<label for='show-password' >
<input type='checkbox' id='show-password' onclick='showPassword()' > Show Password
</label><br>
<input type='submit' value='Login' id='submit'>
</div>
</div>
</body>
</html>
Css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* Global Variables */
:root {
--imperialred: #E63946;
--honeydew: #F1FAEE;
--powderblue: #A8DADC;
--celadonblue: #457B9D;
--prussianblue: #1D3557;
}
/* Css starts here */
* {
margin: 0;
border: 0;
/* box-sizing: border-box; */
font-family: 'Montserrat', sans-serif;
}
nav ul li img {
width: 60px;
height: 60px;
border-radius: 50%;
}
nav ul li.logo {
flex: 1;
}
nav {
background-color: var(--prussianblue);
color: var(--honeydew);
padding: 10px 40px 10px 70px;
border-left: none;
border-right: none;
}
nav ul {
display: flex;
list-style: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
nav ul div.nav-lists {
display: inline-flex;
padding: 0 25px;
}
nav ul div li a {
color: var(--honeydew);
text-decoration: none;
font-size: 18px;
padding: 0 15px;
}
nav ul div li a:hover {
color: var(--imperialred);
}
nav ul .search-box {
height: 40px;
width: 240px;
display: flex;
background-color: var(--imperialred);
border-radius: 5px;
}
nav ul .search-box input {
height: 100%;
width: 200px;
border: none;
outline: none;
border-radius: 5px 0 0 5px;
padding: 0 10px;
font-size: 16px;
}
nav ul .search-box .search-icon {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
border-radius: 0 5px 5px 0;
}
nav ul .search-box .search-icon:hover {
color: #000
}
nav ul .search-box .search-icon span {
font-size: 18px;
}
nav ul .responsive-bar {
font-size: 29px;
display: none;
flex: 1;
padding: 0 40px;
}
nav ul .responsive-bar span {
height: 42px;
width: 42px;
text-align: center;
line-height: 42px;
border-radius: 5px;
cursor: pointer;
}
nav ul .responsive-bar span.show:before {
content: '\f00d';
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
padding: 0 40px;
z-index: -2;
}
.content .text {
font-size: 40px;
font-weight: 800;
padding: 5px 0;
color: #202020;
}
.content .p {
font-size: 28px;
font-weight: 600;
color: #202020;
}
div.losn {
position: sticky;
top: 5px;
display: grid;
text-align: center;
justify-content: flex-end;
font-size:14px;
margin: 5px;
}
div.losn button {
background: transparent;
border: none;
outline: none;
cursor: pointer;
color: var(--honeydew);
background-color: var(--prussianblue);
}
div.losn button:hover {
color: var(--imperialred);
}
body {
background-color: var(--powderblue)
}
div.login-bg {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
div.login-content {
width: 500px;
height: 300px;
background-color: var(--celadonblue);
border-radius: 5px;
display: grid;
align-items: center;
justify-content: center;
position: relative;
}
div.login-content h3 {
font-size: 30px;
text-align: center;
margin-top: 10px;
color: var(--honeydew)
}
div.login-content input {
outline: none;
border: 1px solid var(--prussianblue);
border-radius: 5px;
}
div.login-content #email, #password {
height: 30px;
width: 250px;
padding-left: 10px;
}
div.login-content #email {
margin-top: 30px;
}
div.login-content #submit {
height: 30px;
width: 100%;
background: var(--honeydew);
cursor: pointer;
margin-bottom: 20px;
}
div.login-content #submit:hover {
background-color: #EFEFEF;
}
div.login-content label {
cursor: pointer;
color: var(--honeydew)
}
div.close {
position: absolute;
top: 0;
right: 13px;
font-size: 40px;
color: var(--honeydew);
cursor: pointer;
transform: rotate(45deg);
}
div.close:hover {
color: var(--imperialred);
}
/* Responsive */
#media screen and (max-width: 896px) {
nav {
padding: 10px 40px 10px 0px;
}
}
#media screen and (max-width: 826px) {
nav ul li.responsive-bar {
display: block;
padding-left: 10px;
}
nav {
z-index: 1;
padding: 10px 40px 10px 0px;
}
nav .logo {
display: none;
}
nav ul div.nav-lists {
z-index: -1;
position: fixed;
top: -220px;
width: 100%;
background-color: var(--celadonblue);
right: 0;
display: inline-block;
transition: top .4s;
}
nav ul div.nav-lists.show {
top: 60px;
}
nav ul div.nav-lists li {
text-align: center;
line-height: 30px;
margin: 30px 0;
}
nav ul div.nav-lists li a {
font-size: 19px;
}
nav ul {
padding: 0;
}
}
#media screen and (max-width: 445px) {
nav ul {
flex-wrap: nowrap;
padding: none;
}
nav ul li.search {
width: 50vmin;
}
nav ul li input {
width: 40vmin;
}
nav ul li .search-box {
width: 10vmin;
}
nav ul li.responsive-bar {
padding-left: 10px;
}
}
Javascript:
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});

Step: 1 First of all, you have to hide the pop up modal
div.login-content {
display: none;
}
Step 2: Remove the CSS as below
div.login-bg {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
Stpe 3: Using javascript we will add the class as follows
document.querySelector('.close').addEventListener("click", function hideLoginForm() {document.querySelector('.login-bg').classList.remove("login_transparent"); });
document.getElementById('login-btn').addEventListener("click", function showLoginForm() { document.querySelector('.login-bg').classList.add("login_transparent"); });
Step 4: Add the Styles based on the class you have added in the javascript
.login_transparent {
position: absolute;
background: rgba(0, 0, 0, 0.7);
}
.login_transparent .login-content {
display: grid;
}
Here is my working fiddle
https://jsfiddle.net/Rajkumar007/ovjruq32/

You need to hide the modal when js is loaded
So add document.querySelector('.login-bg').style.display = "none"; at the beginning of your code.
$('nav ul li.responsive-bar span').click(function() {
$('nav ul div.nav-lists').toggleClass("show");
$('nav ul li.responsive-bar span').toggleClass("show");
});
document.querySelector('.login-bg').style.display = "none"; //hide login-bg
// Show password function
function showPassword() {
let passwordType = document.getElementById("password");
if (passwordType.type == "password") {
passwordType.type = "text";
}
else {
passwordType.type = "password";
}
}
// login form visibility function
document.querySelector('.close').addEventListener("click", function hideLoginForm() {
document.querySelector('.login-bg').style.display = "none";
});
document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
document.querySelector('.login-bg').style.display = "flex";
});
and here is a demo : https://jsfiddle.net/mbp49wa7/

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>

Navigation bar not showing when scrolling up

In reference to this snippet here, I am trying to make my navigation show up at the top whenever the user scrolls up.
The nav can disappear as per normal when scrolling down, but it should show up when scrolling back up.
Below is the snippet:
<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"</script>
<nav>
<div class="container">
Brand
<button>
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-menu">
<li>Home</li>
<li>page a</li>
<li>page b</li>
<li>page c</li>
<li>page d</li>
</ul>
</div>
</nav>
body {
background: #eee;
min-height: 3000px;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.add_menu{
background: red;
}
.container {
width: 80%;
margin: 0 auto;
clear: both;
}
a {
display: inline-block;
color: #333;
text-decoration: none;
}
nav {
background: #fff;
height: 80px;
line-height: 80px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
transition: all 0.5s;
}
nav.scrollUp {
transform: translateY(-80px);
}
nav ul.navbar-menu {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
nav ul.navbar-menu li {
display: inline-block;
margin: 0 10px;
}
nav ul.navbar-menu li a {
color: #666;
font-size: 14px;
}
nav a#brand {
text-transform: uppercase;
foat: left;
font-weight: 800;
font-size: 20px;
}
nav button {
background: none;
width: 30px;
height: 40px;
margin-top: 20px;
border: none;
float: right;
display: inline-block;
cursor: pointer;
display: none;
}
nav button span {
width: 30px;
height: 40px;
height: 2px;
background: #333;
display: block;
margin: 5px 0;
}
#media (max-width: 768px) {
nav ul.navbar-menu {
display: none;
}
nav button {
display: block;
}
}
$(document).ready(function () {
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
When I view the page via inspector, I get an uncaught reference error:
Uncaught ReferenceError: $ is not defined
However, I have jquery imported as my snippet shows.
How can I fix this?

I am edit you some portions of code it's fixed please check.
$(document).ready(function () {
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
body {
background: #eee;
min-height: 3000px;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.add_menu{
background: red;
}
.container {
width: 80%;
margin: 0 auto;
clear: both;
}
a {
display: inline-block;
color: #333;
text-decoration: none;
}
nav {
background: #fff;
height: 80px;
line-height: 80px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
transition: all 0.5s;
}
nav.scrollUp {
transform: translateY(-80px);
}
nav ul.navbar-menu {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
nav ul.navbar-menu li {
display: inline-block;
margin: 0 10px;
}
nav ul.navbar-menu li a {
color: #666;
font-size: 14px;
}
nav a#brand {
text-transform: uppercase;
foat: left;
font-weight: 800;
font-size: 20px;
}
nav button {
background: none;
width: 30px;
height: 40px;
margin-top: 20px;
border: none;
float: right;
display: inline-block;
cursor: pointer;
display: none;
}
nav button span {
width: 30px;
height: 40px;
height: 2px;
background: #333;
display: block;
margin: 5px 0;
}
#media (max-width: 768px) {
nav ul.navbar-menu {
display: none;
}
nav button {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="container">
Brand
<button>
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-menu">
<li>Home</li>
<li>page a</li>
<li>page b</li>
<li>page c</li>
<li>page d</li>
</ul>
</div>
</nav>

jQuery - how do I show the full navbar at certain width?

first image
second image
When I click on the 3 bars button the navbar slides down then when I move my mouse away it slides back up. This is working perfectly fine but when ever I make the browser's width bigger the navbar is not there because in jquery i told it to slide up. How can i set jquery to slide up and down at a certain width and a bigger width just to show my navbar. I would like my navbar to collapse at a small width but at a bigger width i would like the whole navbar to show.
CSS:
#media screen and (min-width: 200px) {
#wrapper { width: 300px; }
#top-content{
height: 40px;
}
#navbar li {
display: none;
padding-top: 4%;
text-align: center;
}
#navbar ul{
height: 130px;
}
#icon{
width: 12%;
float: right;
border-left: solid 1px;
}
#navbar{
display: none;
}
}
#media screen and (min-width: 500px) {
#wrapper { width: 450px;}
#navbar li a {
display: inline-block;
}
#icon{
display: none;
}
#navbar ul{
height: 40px;
display: inline-flex;
width: 96%;
}
#top-content{
display: none;
}
#navbar, #navbar li {
display: block;
}
#navbar li{
padding-top: 13%;
}
}
#media screen and (min-width: 700px) {
#wrapper {width: 680px; }
#navbar, #navbar li {
display: block;
}
#navbar li{
padding-top: 13%;
}
}
#media screen and (min-width: 900px) {
#wrapper { width: 850px; }
#navbar, #navbar li {
display: block;
}
#navbar li{
padding-top: 13%;
}
}
HTML:
<body>
<div id="wrapper">
<div id="top-content">
<img id="icon" src="images/dropdown.png" />
</div>
<div id="navbar">
<ul>
<li> Home </li>
<li> About Me </li>
<li> Contact Me </li>
<li> Blog </li>
</ul>
</div>
</div>
</div>
JavaScript:
$('#icon').click(function(){
$('#navbar, #navbar li').slideDown();
});
$('#navbar,#navbar ul').mouseleave(function(){
$('#navbar li, #navbar').slideUp(700);
});

Run this snippet in separate window and resize the window to see the difference. I temporarily changed your img to a div to simulate the menu icon.
var Menu = {
options: {
minWidth: 500,
downDelayMs: 700,
upDelayMs: 700,
},
Init: function() {
$("#icon").on("click", Menu.SlideDown);
$(window).on("resize", Menu.AdjustSize);
Menu.AdjustSize();
},
SlideDown: function() {
$('#navbar, #navbar li').slideDown(Menu.options.downDelayMs);
},
SlideUp: function() {
$('#navbar li, #navbar').slideUp(Menu.options.upDelayMs);
},
AdjustSize: function() {
if ($(window).width() >= Menu.options.minWidth) {
if (!Menu.windowWidth || Menu.windowWidth < Menu.options.minWidth) {
$('#navbar,#navbar ul').off("mouseleave", Menu.SlideUp);
$('#navbar li, #navbar').show();
$("#top-content").hide();
}
} else {
if (!Menu.windowWidth || Menu.windowWidth >= Menu.options.minWidth) {
$('#navbar li, #navbar').hide();
$("#top-content").show();
$('#navbar,#navbar ul').on("mouseleave", Menu.SlideUp);
}
}
Menu.windowWidth = $(window).width();
}
};
Menu.Init();
.fakeicon {
background-color: Green;
width: 40px;
height: 40px;
background-image: url("images/dropdown.png");
cursor: pointer;
}
.fakeicon:hover {
box-shadow: 2px 2px 6px 3px #ccc;
}
ul {
list-style: none;
}
li {
white-space: nowrap;
}
a {
text-decoration: none;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 16px;
color: #333;
display: inline-block;
padding: 6px 20px;
}
a:hover {
background-color: #eee;
box-shadow: 2px 2px 6px 3px #ccc;
}
#media screen and (min-width: 200px) {
#wrapper {
width: 300px;
}
#top-content {
height: 40px;
}
#navbar li {
display: none;
padding-top: 4%;
text-align: center;
}
#navbar ul {
height: 130px;
}
#icon {
width: 12%;
float: right;
border-left: solid 1px;
}
#navbar {
display: none;
}
}
#media screen and (min-width: 500px) {
#wrapper {
width: 450px;
}
#navbar li a {
display: inline-block;
}
#icon {
display: none;
}
#navbar ul {
height: 40px;
display: inline-flex;
width: 96%;
}
#top-content {
display: none;
}
#navbar,
#navbar li {
display: block;
}
#navbar li {
padding-top: 13%;
}
}
#media screen and (min-width: 700px) {
#wrapper {
width: 680px;
}
#navbar,
#navbar li {
display: block;
}
#navbar li {
padding-top: 13%;
}
}
#media screen and (min-width: 900px) {
#wrapper {
width: 850px;
}
#navbar,
#navbar li {
display: block;
}
#navbar li {
padding-top: 13%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="top-content">
<div id="icon" title="Show Menu" class="fakeicon"></div>
</div>
<div id="navbar">
<ul>
<li>Home
</li>
<li>About Me
</li>
<li>Contact Me
</li>
<li>Blog
</li>
</ul>
</div>
</div>

CSS menu make links centre

I have this css for my horizontal menu:
nav {
height: 40px;
width: 100%;
background: #F00;
font-size: 11pt;
font-family: Arial;
font-weight: bold;
position: relative;
border-bottom: 2px solid #FFFFFF;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #000000;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #000000;
color:#FFFFFF;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #FF0;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #FFFFFF;
}
}
how can i make the li links display in the centre?
here is a fiddle of the menu: http://jsfiddle.net/zJq52/

I would do this:
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center; // add text-align
}
nav li {
display: inline; // no more float in here
}
DEMO HERE
Update 1:
To make the width auto:
nav a {
color: #000000;
display: inline-block;
width: auto; // changed this from width: 100px; to auto.
text-align: center;
text-decoration: none;
line-height: 40px;
}
DEMO HERE
Update 2:
Finished Version!
DEMO HERE

Live demo
Change nav a to this:
nav a {
text-align: center;
width: 100%;
}
I also have to mention that you have two nav as. You should merge them into one and apply a little change:
nav a {
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 40px;
width: 100%;
padding: 0 10px;
}
jsFiddle for the merged one and the result for me:
If you want to center the buttons as a row in the horizontal bar then just simply apply a width to the <ul> so add a new class: <ul class="clearfix cont"> and style it in a media rule so it won't affect the other layouts:
#media screen and (min-width: 600px) {
.cont {width: 380px;}
}
jsFiddle and the result:

Not sure exactly what you mean, but if you mean centering all the li in relation to its parent change the width from 600px to 400px
nav ul {
padding: 0;
width: 400px;
height: 40px;
display: block;
margin: 0 auto;
position: relative;
}
demo: - http://jsfiddle.net/zQehH/2/

UPDATED DEMO JSFiddle
Here is the correct way to do the stuff you want
CSS-
nav ul {
padding: 0;
margin: 0 auto;
width:800px;
text-align:center;
height: 40px;
}
nav li {
display: inline-block; //use inline block
}
nav a {
color: #000000;
display: inline-block;
padding: 0 20px; //use padding instead of width
text-decoration: none;
line-height: 40px;
}

Making the choice for a float isn't always the right one.
Your example contains a fixed width of 600px on the "nav ul" element is weird when you only have 4 elements of ~100px width. You can't center that...
I basically removed the float, and the clearfixes.
And then I've made it to contain the following based on how I'd do it..
nav {
margin: 0 auto;
text-align: center;
}
nav ul {
margin: 0 auto;
text-align: center;
width: auto;
}
nav ul li {
display: inline;
display: inline-block;
}
nav ul li a {
/*width: 100px;*/
width: auto;
padding: 0 10px;
}
My example:
http://jsfiddle.net/xewl/4CrdN/1/
I see that you have other versions that do kinda work as planned:
http://jsfiddle.net/zJq52/6/
You didn't set a width on "nav ul li a" here.
But why is there a width on "nav ul" of 400px?

Try This
nav li a {
border-right: 1px solid #FFFFFF;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align:center; /*Added Line*/
}

Super simple.
Add text-align: center to nav ul and remove float: left from nav li.
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav li {
display: inline;
}
Here's an updated fiddle: http://jsfiddle.net/qwUF7/

Develop Reference

JavaScript is the programming language of the Web.

Smart Phone Fixed Nav Bar Not Closing after selection - javascript

Related

Is there any way I can hide my modal when the page is opened

The code for my navbar does not work properly

Navigation bar not showing when scrolling up

jQuery - how do I show the full navbar at certain width?

CSS menu make links centre

Categories

Resources