I want to make a responsive navigation on my website.
i didn't use a grid
I tried
#media screen and (max-width: 600px) {
.menu{
height: 100%;
width: 15px;
float: top;
}}
but that don't work
I want it to get on the top of my website
So some suggestions:
Send the html code or jsut some of it.
You can also try adding margin: 0; to the body:
body{
margin: 0;
}
You will also need to add a background - color:
.menu {
background-color: red;
}
And more stuff could be added but you can check this:
https://www.w3schools.com/howto/howto_css_style_header.asp
This helps a lot
You can use this codepen which I had made yesterday or may be before that, I don't remember :-
https://codepen.io/CodingPencil/pen/abEWzXp
Or just copy my code here :-
HTML -
<nav>
<div>
Something
</div>
<div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu" id="menu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
CSS -
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--nav-bg: #03000e;
--main-clr: dodgerblue;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
width: 100%;
background: #03000e;
}
nav .logo {
color: #fff;
text-decoration-color: var(--main-clr);
font-size: 22px;
font-family: "Playfair Display", serif;
font-weight: 100;
}
nav ul {
--padding: 20px;
--font-size: 17px;
list-style: none;
display: flex;
align-items: center;
font-size: var(--font-size);
overflow-y: hidden;
transition: 1s ease;
}
nav ul li {
padding: var(--padding);
}
nav ul li a {
color: #fff;
text-decoration: none;
position: relative;
}
nav ul li a::after {
content: "";
width: 0%;
height: 2.5px;
border-radius: 99px;
background: var(--main-clr);
position: absolute;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
nav .menu {
width: 22px;
height: 16px;
cursor: pointer;
display: none;
align-items: center;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 20px;
}
nav .menu span {
width: 100%;
height: 2px;
border-radius: 99px;
background: #fff;
transition: 0.3s ease;
transform-origin: left;
}
nav .menu.active span {
background: var(--main-clr);
}
nav .menu.active span:nth-child(1) {
transform: rotate(40deg);
}
nav .menu span:nth-child(3) {
transform-origin: left;
}
nav .menu.active span:nth-child(3) {
transform: rotate(-40deg);
}
nav .menu.active span:nth-child(2) {
transform: scale(0);
}
#media (max-width: 910px) {
nav .menu {
display: flex;
}
nav ul {
--height: 0px;
flex-direction: column;
background: var(--nav-bg);
position: absolute;
width: 100%;
left: 0;
top: 56px;
height: var(--height);
transition: 1s ease;
}
nav ul.active {
--height: calc(
(((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
);
transition: 1s ease;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
width: 100%;
text-transform: capitalize;
}
}
And the JAVASCRIPT -
const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");
menu.addEventListener("click", () => {
navigation.style.setProperty("--childenNumber", navigation.children.length);
navigation.classList.toggle("active");
menu.classList.toggle("active");
});
There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.
try below one,
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
References:
https://getbootstrap.com/docs/5.0/components/navbar/
https://www.w3schools.com/css/css_navbar.asp
Note: float:top is not working
Related
I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D
Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">
Description: I have a responsive navbar which is opening and closing perfectly fine.
Problem: When I click on a link, It doesn't close itself. I have to manually close it.
Kindly find the codebase below:
navbar.component.html
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<div class="header header-fixed">
<div class="navbar container">
<div class="logo">
<div class="logo">REYA</div>
</div>
<input type="checkbox" id="navbar-toggle">
<label for="navbar-toggle"><i></i></label>
<nav class="menu">
<ul>
<li><a (click)="goToHome('home')">Home</a></li>
<li><a (click)="goToBlogs('more-blogs')">Blogs</a></li>
<li><a (click)="goToServices('services')">Services</a></li>
<li><a (click)="goToContact('contact')">Contact</a></li>
<li><a>Login</a></li>
<li><a>Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<router-outlet></router-outlet>
navbar.component.css
body {
margin: 0;
}
.header-fixed {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #242424;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 60px;
}
.navbar .logo {
height: 80px;
}
.navbar .logo:hover {
color: #777777;
}
.navbar nav {
flex: 8;
}
.navbar label {
user-select: none;
cursor: pointer;
padding: 28px 20px;
position: relative;
z-index: 3;
}
.navbar label i {
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
font-style: normal;
font-weight: normal;
}
.navbar label i:before,
.navbar label i:after {
content: '';
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar label i,
.navbar label i:before,
.navbar label i:after {
display: block;
background: #eee;
}
.navbar label i:before {
top: 5px;
}
.navbar label i:after {
top: -5px;
}
.navbar #navbar-toggle {
display: none;
}
.header #navbar-toggle:checked~.menu {
visibility: visible;
opacity: 0.99;
}
.header #navbar-toggle:checked~label {
background: #212121;
border-radius: 50%;
}
.header #navbar-toggle:checked~label i {
background: transparent;
}
.header #navbar-toggle:checked~label i:before {
transform: rotate(-45deg);
}
.header #navbar-toggle:checked~label i:after {
transform: rotate(45deg);
}
.header #navbar-toggle:checked~label:not(.steps) i:before,
.header #navbar-toggle:checked~label:not(.steps) i:after {
top: 0;
}
#media (max-width: 768px) {
.navbar nav {
visibility: hidden;
opacity: 0;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transition: all 0.3s ease-out;
display: table;
background: #ddd;
}
.navbar nav ul {
margin: 0;
padding: 20px 0;
display: table-cell;
vertical-align: middle;
}
.navbar nav li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.navbar nav li:hover {
background: #525151;
}
.navbar nav li:hover a {
color: #fff;
transition: all 0.3s ease-out;
}
.navbar nav li a {
color: #212121;
}
}
#media (min-width: 768px) {
.navbar nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
text-align: center;
list-style: none;
}
.navbar nav li {
flex: 1;
}
.navbar nav li a {
display: block;
padding: 0 8px;
font-size: 16px;
line-height: 60px;
color: #fff;
text-decoration: none;
}
.navbar nav li.active {
background: #555;
}
.navbar nav li:hover {
background: #333;
}
.navbar label {
display: none;
}
}
.navbar .logo {
flex: 3;
}
.navbar .logo a {
display: block;
font-size: 30px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin-left: 20px;
margin-top: 10px;
}
.navbar .logo a:hover {
color: #4d4c4c;
transition: .2s;
}
I have tried many options including:
Commenting out most of the lines
Removing the media queries
Removing the click event
Nothing is working! Can somebody please help me?
I'm not sure how you implemented your JS functions, but I think I would simulate a click on the navbar toggler or just make a function called whenever the user navigates, that makes sure the navbar is closed after navigation.
I'm trying to float: right my the email/tel and toggle menu button to the right side of the page but have it in the order: email/tel/toggle menu button (toggle menu button on the furthest right). I want the items to push each other across as the window narrows and then I already have a #media to get rid of the tel and email at a certain width.
The toggle menu button is ahead of my contact details but I figured that if they were all set to float right then then order that you put them in the html should determine how they appear on the page?
Also, as another question, my children menu of drop down menu (under services in my code pen) don't line up with the main header, what css do I need to add/change to fix this?
CSS
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggleContainer (
display:inline-block;
float: right;
width: auto;
)
.toggle-menu {
width: 50px;
height: 50px;
top: 10px;
position: absolute;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
HTML
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Great <span class="edit-name" style="font-family:arial black">Things</span>
</a>
</h1>
<div class="teleHeader">
<span class="narrow-hide" ">
<a>
TEL: +44 (0) 111111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#awesome.co.uk
</a>
</span>
</div>
<div class="toggleContainer">
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
#Services
<ul class="services-dropdown">
<li>Hi</li>
<li>There</li>
<li>How</li>
<li>Funny</li>
</ul>
</li>
<li>
More
</li>
<li>
Stuff
</li>
<li>
k
</li>
</ul>
</nav>
</header>
Script
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
CODEPEN: https://codepen.io/Ribeye/pen/qBbJRMa
I would recommend you going for using flexbox, it will be much easier then trying to align inline-block elements.
Here is a good ressource on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As said by #Mark-Att, you can use flexbox to overcome this issue.
I've modified your HTML and added corresponding CSS. Try viewing the result in a full page and you will see the results.
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$header_top.toggleClass('open-menu');
});
* {
margin: 0;
padding: 0;
font-family: 'Open Sans';
/*text-transform: uppercase;*/
}
html {
font-size: 62.5%;
}
body {
background-color: #f5f5f5; /*light grey*/
/*background-color: #00ffff; light blue */
letter-spacing: .18em;
}
/*This CSS is for the header*/
/*This CSS is for the logo, name, tele, email*/
h1 {
/*The line height = div height centers everything inside div*/
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.general-info{
display: flex;
align-content: end;
flex-direction: row;
justify-content: flex-end;
}
.teleHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
}
.emailHeader {
display:inline-block;
float: right;
width: auto;
font-size: 17px;
line-height: 70px;
height: 70px;
margin-right: 20px;
}
.teleHeader a, .emailHeader a {
color: red;
font-weight: bold;
font-family: "Open Sans";
}
/*CSS for the navbar menu*/
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none; /* This removes all the bullet points from all unordered lists*/
} /*I need to keep this as it styles the navbar*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
overflow: hidden;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop down menus in the headers*/
ul li ul.services-dropdown{
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown{
display: inline-block; /* Display the dropdown */
position:relative;
}
ul li ul.services-dropdown li{
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a{
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 3.5vw;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1420px) {
.narrow-hide{
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">
<a href="Home Page.html">
<img style="margin-top: 10px; margin-right: 20px;" alt="Logo" src="../Logo/Vector Logo.png" width="60px" height="50px">
</a>
</h1>
<h1 class="l-left">
<a href="Home Page.html">
Awesome <span class="edit-name" style="font-family:arial black">Cakes</span>
</a>
</h1>
<div class="general-info">
<div class="teleHeader">
<span class="narrow-hide">
<a>
TEL: +44 (0) 11111111
</a>
</span>
</div>
<div class="emailHeader">
<span class="narrow-hide">
<a>
EMAIL: info#yay.com
</a>
</span>
</div>
<a class="l-right toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
</li>
<li>
abc
</li>
<li>
abc
</li>
</ul>
</nav>
</header>
I am using a a navbar template but I am having an issue where the navbar links still exist on the page and are clickable even when the navbar is "closed".
I was thinking of maybe changing the class with the script, modifying the existing one but I actually am not sure how to do that.
What is the best way to hide the links or get rid of them temporarily when the navbar is closed?
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<li>
Data Protection
</li>
<li>
Data Protection
</li>
</ul>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script>
Codepen: https://codepen.io/Ribeye/pen/BajOoeb
Just add overflow: hidden to nav and it will be fixed;
nav {
overflow: hidden;
}
You've set height: 0 and opacity: 0, but the content still overflows and the only reason it's not visible is bacause of opacity: 0 property, that just makes it transparent so it's still clickable.
You should add pointer-events: none to .nav and pointer-events: auto to .open-menu ~ nav
auto
The element behaves as it would if the pointer-events property
were not specified. In SVG content, this value and the value
visiblePainted have the same effect.
none
The element is never the target of pointer events; however,
pointer events may target its descendant elements if those descendants
have pointer-events set to some other value. In these circumstances,
pointer events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
Ref
var $header_top = $('.header-top');
var $nav = $('nav');
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
/* added */
nav {
pointer-events: none;
}
.open-menu~nav {
pointer-events: auto;
}
/*****/
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style-type: none;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
transform: translateY(300px);
transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
transition: opacity, transform 1s, -webkit-transform 1s;
transition-delay: 1s;
}
.header-top {
background: white;
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
min-width: 300px;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
color: red;
padding: 0 10px;
font-family: "arial black";
font-size: 35px;
}
.first-letter {
color: red;
padding: 0px;
font-family: "arial black";
font-size: 45px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: red;
width: 30px;
left: 10px;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
transition: all 1s;
}
.open-menu~nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: flex;
}
nav li {
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
transition: background .3s;
}
nav li a {
background: #ff4b4b;
margin-left: 20px;
}
nav li a:hover {
background: #ADD8E6;
}
/*These 3 sections add the drop dwon menus in the headers*/
ul li ul.services-dropdown {
display: none;
z-index: 999;
width: 100%;
}
ul li:hover ul.services-dropdown {
display: inline-block;
/* Display the dropdown */
}
ul li ul.services-dropdown li {
display: block;
}
section {
text-align: center;
}
h2 {
font-size: 13px;
}
h2 a {
padding: 8 8 8 8px;
float: left;
color: white;
background-color: red;
font-family: 'Open Sans';
font-weight: bold;
}
h3 {
font-weight: bold;
font-size: 60px;
color: white;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 2px solid #212121;
}
#media (max-width: 700px) {
.edit-name {
display: none;
}
}
/*Removes the tel and email when window is narrow */
#media (max-width: 1230px) {
.narrow-hide {
display: none;
}
}
/*Edits the nav bar when window is narrow */
#media screen and (max-width: 767px) {
nav ul {
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu~nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<header>
<div class="header-top clearfix">
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li>
Home
</li>
<li>
Services
<ul class="services-dropdown ">
<li>whats </li>
<li>Stuff</li>
<li>Things</li>
</ul>
</li>
<li>
News & Events
</li>
<li>
Contact Us
</li>
<l>
Data Protection
</l>
<l>
Data Protection
</l>
</ul>
</nav>
</header>
You just need to set overflow: hidden property on the nav element
I'm new to coding and I'm making a website. But I have a problem, it can't get it centered. I don't want it full width but a bit off the side like a box. Like you can see, there is more margin on the right than on the left, how is that possible? Is it a bug or just something that I need to add in order that it will work? Hopefully you can help me! Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
width: 95%;
margin: 0 auto;
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Generally to center something we use margin: 0 auto. Try adding that to your nav styling.
To pull your nav items to the right, I would try using flexbox (a great thing to learn if you're new to HTML/CSS).
Here's the final CSS:
nav {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
The CSS you applied to .container should move to header
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
width: 95%;
margin: 0 auto;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Set you'r .container to position: relative; or you go like:
.container {
width: 95%;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;}