Develop Reference

Elements are going inside the nav bar css react

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 do I make my navbar go from no shadow to shadow with fade transition on scroll?

I want my navbar to go from no shadow to shadow on scroll—DONE (read my answer below). Now I want to add a fade transition effect to the shadow on scroll. Read "Updated" below.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.topnav').addClass('shadow');
} else {
$('.topnav').removeClass('shadow');
}
});
});
.logo {
float: left;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 30px;
padding-top: 20px;
width: 210px;
height: auto;
}
.topnav {
overflow: hidden;
background-color: white;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 1000;
width: 100%; !important;
position: fixed;
}
.topnav.shadow {
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
}
.topnav a {
float: left;
display: block;
color: grey;
text-align: center;
padding-top: 30px;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease-out;
}
.active, .nav-btn {
color: #1a1a1a;
}
#media (max-width: 800px) {
.resp-t-n {
padding-top: 60px;
}
.resp-b-n {
padding-bottom: 30px;
}
.logo {
width: 130px;
height: auto;
}
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: grey;
padding: 34px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
transition: color 0.3s ease-out;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1001;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover:not(.logo), .dropdown:hover .dropbtn {
color: #1a1a1a;
transition: color 0.5s ease;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn .resp-t-n .resp-b-n {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#active {
color: #1a1a1a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<img class="logo" src="[img path]">
<div class="resp-t-n">Home</div>
Elements
About
<div class="resp-b-n">Contact</div>
<i class="fal fa-bars"></i>
</div>
I'm attempting to learn how to code from scratch and anything I don't know, I usually just search up, but I genuinely can't find a solution that works, hence my first post.
I would really appreciate any help :)
Found an error in my console:
Uncaught ReferenceError: $ is not defined
at main.js:14
The code at line 14 is
$(document).ready(function() { — I fixed this issue
Updated
I'd now like to add a fade transition to the shadow on scroll. Would that be achieved with CSS or would it also have to be backed up using JS?

The issue was that <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> was underneath my main .js file. I just moved it above. Such a simple and stupid mistake!
For the second part of my question—the transition—I added transition: 1s; to .topnav
Thank you all very much for your time :)

$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if ($(this).scrollTop() > 50) {
$('.topnav').addClass('shadow');
} else {
$('.topnav').removeClass('shadow');
}
});
});
body {
height: 200vh/* just for checking purpose */
}
.logo {
float: left;
padding-left: 20px;
padding-right: 15px;
padding-bottom: 30px;
padding-top: 20px;
width: 210px;
height: auto;
}
.topnav {
overflow: hidden;
background-color: white;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 1000;
width: 100%;
position: fixed;
}
.topnav.shadow {
-webkit-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25);
}
.topnav a {
float: left;
display: block;
color: grey;
text-align: center;
padding-top: 30px;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease-out;
}
.active,
.nav-btn {
color: #1a1a1a;
}
#media (max-width: 800px) {
.resp-t-n {
padding-top: 60px;
}
.resp-b-n {
padding-bottom: 30px;
}
.logo {
width: 130px;
height: auto;
}
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: grey;
padding: 34px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
transition: color 0.3s ease-out;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1001;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover:not(.logo),
.dropdown:hover .dropbtn {
color: #1a1a1a;
transition: color 0.5s ease;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child),
.dropdown .dropbtn .resp-t-n .resp-b-n {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {
position: fixed;
}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
#active {
color: #1a1a1a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
<img class="logo" src="[img path]">
<a href="/" id="active">
<div class="resp-t-n">Home</div>
</a>
Elements
About
<a href="contact.html">
<div class="resp-b-n">Contact</div>
</a>
<i class="fal fa-bars"></i>
</div>
Your page window has less content. If you have content more than 500px as you mentioned in your js, it will work.

mobile view issue when the menu opened?

when opening the menu and scroll down the navbar still move
I want when open the menu prevents the scroll
I implemented the below code for responsive navbar but I'm facing an issue on the mobile view only
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
any help on that issue, please
note: i hide the banner above the navbar on the mobile view but on the big screen view not hidden

Add 'overflow:hidden' to body when menu is open. it will solve your problem.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('.banner').height())
{
$('nav').addClass('fixed');
$('body').css('overflow', 'hidden');
}
else
{
$('nav').removeClass('fixed');
$('body').css('overflow', 'auto')
}
});
});
body{
height:1000px;
}
.banner{
height: 120px;
background: red;
}
.fixed {
position: fixed;
top: 0;
left:0;
/* bottom:0;
overflow:auto; */ /* if you want scroll inside menu */
width: 100%;
}
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (min-width:768px){
nav{
display: block !important;
}
}
#media (max-width:768px){
.banner{
display: none;
position: fixed;
}
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
position: fixed;
top:0;
left:0;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="banner">centered image
</div>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

navbar responsive issue when resize the browser width?

i have an issue for the responsive navbar, when i resize the browser for the mobile view and open then close the menu button, after that make the browser full screen for the big screen view the navbar will disappear
any help for that issue
i need to add another feature to fix the navbar when scroll down but when scroll on the mobile the menu it looks messed up
below my code(on snippet)
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

As per your html structure you have to add below code to your css
#media (min-width:768px){
nav{
display: block !important;
}
}
Using this you don't have to make any changes in your html and css.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
})
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

You also need to update your navigation when the window is resized. Kindly check. Hope this is helpful to you. Just made a update in jquery.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
});
$( window ).resize(function() {
if($(window).width() > 767) {
$("nav").slideDown(800);
}
});
});
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
display: block
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<nav>
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>

Please check the below line of code to add image above nav and make header sticky.
Script
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(800);
$("nav").toggleClass("fixed_nav");
$(".responsive-bar").toggleClass("addtop");
});
});
$(window).scroll(function(){
if($(window).width() > 767) {
if ($(window).scrollTop() >= 150) {
$('nav').addClass('fixed-header');
}
else {
$('nav').removeClass('fixed-header');
}
}
else {
if ($(window).scrollTop() >= 150) {
$('.responsive-bar').addClass('fixed-header');
}
else {
$('.responsive-bar').removeClass('fixed-header');
}
}
});
HTML
<div class="img-wrapper">
<img src="https://via.placeholder.com/1250x150">
</div>
<nav class="nav-bar">
<h1 id="full-logo">MyCar</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div style="clear:both;"></div>
</nav>
<div class="responsive-bar">
<h3 class="brand">MyCar</h3>
<h4 class="menu">Menu</h4>
<div style="clear:both;"></div>
</div>
.............
CSS
nav{
width: 100%;
background: #202c45;
padding: 0 50px;
box-sizing: border-box;
}
nav h1{
margin: 0;
padding: 0;
float: left;
padding-top: 18px;
}
nav h1 a{
color: #fff;
text-decoration: none;
}
nav ul{
margin: 0;
padding: 0;
float: right;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 20px;
transition: 0.5s;
}
nav ul li:hover{
background: #f2184f;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
.responsive-bar{
width: 100%;
background: #202c45;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.responsive-bar h3{
margin: 0;
padding: 3px 0;
float: left;
color:#fff;
}
.responsive-bar h3 a{
color:#fff;
text-decoration: none;
}
.responsive-bar h4{
margin: 0;
padding: 0;
color: #fff;
float: right;
cursor: pointer;
padding: 5px 10px;
background:#f2184f;
text-transform: uppercase;
}
#media (max-width:768px){
nav{
display: none;
padding: 0;
}
.responsive-bar{
display: block;
}
nav h1{
display: block;
float: none;
}
nav ul{
float: none;
}
nav ul li{
display: block;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255,255,255,.1)
}
#full-logo{
display: none;
}
img {
display: none;
}
.nav-bar.fixed_nav{
display: none;
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
}
.fixed-header.addtop {
top: 98px;
}
}
#media (min-width:768px){
nav{
display: block !important;
}
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

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/