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

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>

Related

Dropdown menu from hover to onclick

How would I convert the following sub-navigation menu from hover to on-click with j-query? In the example I have added an active class and used j-query to display the sub-nav however it disappears after the user clicks it.
https://codepen.io/patriciaworth/pen/bGGMBow
I followed the instructions on this webpage to no avail.
how to change dropdown menu from hover to onclick
HTML
<!DOCTYPE html>
<html>
<head>
<title>Liive Real Estate</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>
</body>
</html>
SCSS
/*reset*/
*
{
margin: 0;
padding:0;
list-style-type: none;
border: none;
text-decoration: none;
}
html
{
width:100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;
//fonts
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;
//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;
.panel
{
display: block;
}
.navbar
{
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: $heading-font;
padding: 0 20px;
#media screen and (max-width: $medium)
{
display: block;
padding: 0;
}
.logo
{
flex:1;
text-align: left;
font-size: 22px;
color: $purple;
font-weight: 500;
#media screen and (max-width: $medium)
{
display: block;
border-bottom: 1px solid $purple;
text-align: left;
padding: 20px;
}
}
.toggle
{
display: none;
#media screen and (max-width: $medium)
{
display: block;
position: absolute;
top: 20px;
right:20px;
font-family: $heading-font;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.panel
{
flex: 7;
display: flex;
align-items: center;
justify-content: center;
#media screen and (max-width: $medium)
{
display: none;
}
.links
{
flex:6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
}
ul
{
display: block;
width: 100%;
#media screen and (max-width: $medium)
{
padding: 20px 0;
}
}
li
{
display: inline-block;
#media screen and (max-width: $medium)
{
display: block;
}
}
ul li a
{
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
#media screen and (max-width: $medium)
{
padding:5px 0;
}
}
ul li a:hover
{
background: $purple;
color: #fff;
}
ul li ul
{
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
#media screen and (max-width: $medium)
{
position: relative;
top:0;
width: 100%;
}
}
ul li ul li
{
display: block;
text-align: left;
#media screen and (max-width: $medium)
{
text-align: center;
}
a
{
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
&:hover
{
color: $purple;
background: transparent !important;
}
}
}
ul li:hover ul
{
display: block;
}
ul li:hover a
{
background: $purple;
color: #fff;
}
/*THIS DOES NOT WORK*/
/*.active
{
display: block !important;
a
{
background: $purple;
color: #fff;
}
}*/
.signup
{
flex:1;
text-align: right;
button
{
border: 1px solid $purple;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
&:hover
{
background: $purple;
color: #fff;
}
}
#media screen and (max-width: $medium)
{
text-align: center;
padding-bottom: 20px;
display: block;
}
}
}
JS
$(document).ready(function(){
$(".toggle").click(function(){
$("nav .panel").slideToggle();
});
/*THIS DOES NOT WORK*/
/*$("nav").on("click", "li", function(){
$(this).children("ul").toggleClass("active");
$("nav li").not(this).children("ul").removeClass("active");
});*/
});

You can directly covert the hover class into an active class, and then on click, toggle the active class. Find the below snippet and view in full screen so that its not affected by the media-queries.
Additinally, you need to include href="#" or else it will reload the page.
ul li.active ul {
display: block;
}
ul li.active a {
background: $purple;
color: #fff;
}
$(document).ready(function() {
$(".toggle").click(function() {
$("nav .panel").slideToggle();
});
$("nav").on("click", "li", function() {
$('nav li.active').not(this).removeClass("active"); // remove previous selection
$(this).toggleClass("active");
});
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
/*reset*/
* {
margin: 0;
padding: 0;
list-style-type: none;
border: none;
text-decoration: none;
}
html {
width: 100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
.panel {
display: block;
}
.navbar {
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
padding: 0 20px;
/*THIS DOES NOT WORK*/
/*.active {
display: block !important;
a {
background: $purple;
color: #fff;
}
}
*/
}
#media screen and (max-width: 992px) {
.navbar {
display: block;
padding: 0;
}
}
.navbar .logo {
flex: 1;
text-align: left;
font-size: 22px;
color: #a491d3;
font-weight: 500;
}
#media screen and (max-width: 992px) {
.navbar .logo {
display: block;
border-bottom: 1px solid #a491d3;
text-align: left;
padding: 20px;
}
}
.navbar .toggle {
display: none;
}
#media screen and (max-width: 992px) {
.navbar .toggle {
display: block;
position: absolute;
top: 20px;
right: 20px;
font-family: 'Poppins', sans-serif;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.navbar .panel {
flex: 7;
display: flex;
align-items: center;
justify-content: center;
}
#media screen and (max-width: 992px) {
.navbar .panel {
display: none;
}
}
.navbar .panel .links {
flex: 6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
.navbar ul {
display: block;
width: 100%;
}
#media screen and (max-width: 992px) {
.navbar ul {
padding: 20px 0;
}
}
.navbar li {
display: inline-block;
}
#media screen and (max-width: 992px) {
.navbar li {
display: block;
}
}
.navbar ul li a {
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
}
#media screen and (max-width: 992px) {
.navbar ul li a {
padding: 5px 0;
}
}
.navbar ul li a:hover {
background: #a491d3;
color: #fff;
}
.navbar ul li ul {
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
}
#media screen and (max-width: 992px) {
.navbar ul li ul {
position: relative;
top: 0;
width: 100%;
}
}
.navbar ul li ul li {
display: block;
text-align: left;
}
#media screen and (max-width: 992px) {
.navbar ul li ul li {
text-align: center;
}
}
.navbar ul li ul li a {
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
}
.navbar ul li ul li a:hover {
color: #a491d3;
background: transparent !important;
}
.navbar ul li.active ul {
display: block;
}
.navbar ul li.active a {
background: #a491d3;
color: #fff;
}
.navbar .signup {
flex: 1;
text-align: right;
}
.navbar .signup button {
border: 1px solid #a491d3;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
}
.navbar .signup button:hover {
background: #a491d3;
color: #fff;
}
#media screen and (max-width: 992px) {
.navbar .signup {
text-align: center;
padding-bottom: 20px;
display: block;
}
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li>Home</li>
<li>
Property
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>
Agents
<ul>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>
</li>
<li>Pages</li>
<li>Contact</li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>

You can search element like immediate siblings next to <a> tag which is <ul>:
$('a+ul').click()
or search all the items
you can get one more deep:
$('a+ul>li').click()
+ immediate sibilin
> all children

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>

How to get dropdown to display correctly?

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>

Smart Phone Fixed Nav Bar Not Closing after selection

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

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/

Categories

Resources