Javascript file not working when linking file to a html document - javascript

So I have a school project to make a website and I cannot link my javascript file properly. As seen in the code below, the javascript works fine, it is just the referencing. I have referenced the javascript file like this:
<script type="text/javascript" src="ContactUsPage.js"></script>
and it isn't working. if it helps, I am using Atom text editor.
const checkbox = document.querySelector('.my-form input[type="checkbox"]');
const btns = document.querySelectorAll(".my-form button");
checkbox.addEventListener("change", function() {
const checked = this.checked;
for (const btn of btns) {
checked ? (btn.disabled = false) : (btn.disabled = true);
}
});
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 125.19px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Links inside the navbar */
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 126.4px;
background-color: inherit;
}
.box {
width: 1100px;
padding: 10px;
border : 5px solid #000000;
margin: 10;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 126.4px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/*
body{
background: #7f7df9;
}
.contact-us{
width: 250px;
background: #fff;
padding: 50px;
margin: 100px auto;
border-radius: 30px;
position: relative;
}
.title h1{
color: #535274;
letter-spacing: 5px;
margin-bottom: 25px;
text-align: center;
}
.form,
.form-items{
width: 100%;
}
.form-items .input{
width: 100%;
margin-bottom: 12px;
padding: 15px 40px;
box-sizing: border-box;
background: #ebeef1;
border: 0px;
outline: none;
border-radius: 30px;
}
.form-items .input.message{
height: 125px;
border-radius: 15px;
margin-bottom: 30px;
padding: 15px 15px;
resize: none;
}
.btn{
background: #827ffe;
text-align: center;
color: #fff;
padding: 12px;
border-radius: 25px;
cursor: pointer;
}
.btn .fas{
margin-left: 10px;
font-size: 12px;
}
.form-items{
position: relative;
}
.form-items .fas{
position: absolute;
top: 15px;
left: 15px;
color: #9a99aa;
}
.social-icons{
position: absolute;
bottom: -25px;
left: 50%;
width: 200px;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
}
.social-icons div{
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.social-icons div .fab{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
}
.social-icons div.facebook{
background: #5178d9;
}
.social-icons div.twitter{
background: #41caf6;
}
.social-icons div.google{
background: #fb4f4f;
}
#import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--white: #afafaf;
--red: #e31b23;
--bodyColor: #292a2b;
--borderFormEls: hsl(0, 0%, 10%);
--bgFormEls: hsl(0, 0%, 14%);
--bgFormElsFocus: hsl(0, 7%, 20%);
}
/* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
a {
color: inherit;
}
*/
input,
select,
textarea,
button {
font-family: inherit;
font-size: 100%;
}
button,
label {
cursor: pointer;
}
select {
appearance: none;
}
/* Remove native arrow on IE */
select::-ms-expand {
display: none;
}
/*Remove dotted outline from selected option on Firefox*/
/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/
/*We use !important to override the color set for the select on line 99*/
select:-moz-focusring {
color: transparent !important;
text-shadow: 0 0 0 var(--white);
}
textarea {
resize: none;
}
ul {
list-style: none;
}
body {
font: 18px/1.5 "Open Sans", sans-serif;
background: var(--bodyColor);
color: var(--white);
margin: 1.5rem 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form h1 {
margin-bottom: 1.5rem;
}
.my-form li,
.my-form .grid > *:not(:last-child) {
margin-bottom: 1.5rem;
}
.my-form select,
.my-form input,
.my-form textarea,
.my-form button {
width: 100%;
line-height: 1.5;
padding: 15px 10px;
border: 1px solid var(--borderFormEls);
color: var(--white);
background: var(--bgFormEls);
transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),
transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form textarea {
height: 170px;
}
.my-form ::placeholder {
color: inherit;
/*Fix opacity issue on Firefox*/
opacity: 1;
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus,
.my-form button:enabled:hover,
.my-form button:focus,
.my-form input[type="checkbox"]:focus + label {
background: var(--bgFormElsFocus);
}
.my-form select:focus,
.my-form input:focus,
.my-form textarea:focus {
transform: scale(1.02);
}
.my-form *:required,
.my-form select {
background-repeat: no-repeat;
background-position: center right 12px;
background-size: 15px 15px;
}
.my-form *:required {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg);
}
.my-form select {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/down.svg);
}
.my-form *:disabled {
cursor: default;
filter: blur(2px);
}
/* FORM BTNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form .required-msg {
display: none;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/asterisk.svg)
no-repeat center left / 15px 15px;
padding-left: 20px;
}
.my-form .btn-grid {
position: relative;
overflow: hidden;
transition: filter 0.2s;
}
.my-form button {
font-weight: bold;
}
.my-form button > * {
display: inline-block;
width: 100%;
transition: transform 0.4s ease-in-out;
}
.my-form button .back {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-110%, -50%);
}
.my-form button:enabled:hover .back,
.my-form button:focus .back {
transform: translate(-50%, -50%);
}
.my-form button:enabled:hover .front,
.my-form button:focus .front {
transform: translateX(110%);
}
/* CUSTOM CHECKBOX
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.my-form input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.my-form input[type="checkbox"] + label {
position: relative;
display: inline-block;
padding-left: 2rem;
transition: background 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
}
.my-form input[type="checkbox"] + label::before,
.my-form input[type="checkbox"] + label::after {
content: '';
position: absolute;
}
.my-form input[type="checkbox"] + label::before {
left: 0;
top: 6px;
width: 18px;
height: 18px;
border: 2px solid var(--white);
}
.my-form input[type="checkbox"]:checked + label::before {
background: var(--red);
}
.my-form input[type="checkbox"]:checked + label::after {
left: 7px;
top: 7px;
width: 6px;
height: 14px;
border-bottom: 2px solid var(--white);
border-right: 2px solid var(--white);
transform: rotate(45deg);
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
font-size: 1rem;
text-align: right;
backface-visibility: hidden;
}
footer a {
text-decoration: none;
}
footer span {
color: var(--red);
}
/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (min-width: 600px) {
.my-form .grid {
display: grid;
grid-gap: 1.5rem;
}
.my-form .grid-2 {
grid-template-columns: 1fr 1fr;
}
.my-form .grid-3 {
grid-template-columns: auto auto auto;
align-items: center;
}
.my-form .grid > *:not(:last-child) {
margin-bottom: 0;
}
.my-form .required-msg {
display: block;
}
}
#media screen and (min-width: 541px) {
.my-form input[type="checkbox"] + label::before {
top: 50%;
transform: translateY(-50%);
}
.my-form input[type="checkbox"]:checked + label::after {
top: 3px;
}
}
<html>
<link href="AboutUs.css" rel="stylesheet" type="text/css">
<head>
<img src="Final Logo.jpg" width="106" height="106">
<meta charset="UTF-8">
<title>choose one already</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> also this
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
Home
About Us
<div class="dropdown">
<button class="dropbtn">Stories
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Jack and Jill
Cinderalla
,Mayuka
</div>
</div>
<a href="ContactUsPage.html" class="active" >Contact Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<body style="background-color:#faecca">
<script type="text/javascript" src="ContactUsPage.js"></script>
<form class="my-form">
<div class="container">
<h1>Get in touch!</h1>
<ul>
<li>
<select>
<option selected disabled>-- Please choose an option --</option>
<option>Request Quote</option>
<option>Send Resume</option>
<option>Other</option>
</select>
</li>
<li>
<div class="grid grid-2">
<input type="text" placeholder="Name" required>
<input type="text" placeholder="Surname" required>
</div>
</li>
<li>
<div class="grid grid-2">
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone">
</div>
</li>
<li>
<textarea placeholder="Message"></textarea>
</li>
<li>
<input type="checkbox" id="terms">
<label for="terms">I have read and agreed with the terms and conditions.</label>
</li>
<li>
<div class="grid grid-3">
<div class="required-msg">REQUIRED FIELDS</div>
<button class="btn-grid" type="submit" disabled>
<span class="back">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/email-icon.svg" alt="">
</span>
<span class="front">SUBMIT</span>
</button>
<button class="btn-grid" type="reset" disabled>
<span class="back">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/eraser-icon.svg" alt="">
</span>
<span class="front">RESET</span>
</button>
</div>
</li>
</ul>
</div>
</form>
<footer>
<div class="container">
</small>
</div>
</footer>
</body>
</html>


IF YOU ARE HOSTING IT LOCALLY
I would make sure that you are providing the correct relative path of the js to the html file. That tends to be the most common problem. You may need to go to the parent folder before referencing the script location or do whatever fixes the relative path.
IF YOU ARE HOSTING IT ON A SERVER
I would make sure that you are accessing the correct endpoint to retrieve the CSS and js files. Looking at the web console when you load the page can be helpful. You would probably see FILE DNE errors.
I would also move the script import statement to the top of the document in the head. Not that it fixes your code, but it may help you avoid potential errors. Otherwise, I don't see anything strikingly wrong about your code.


I realised I put the javascript reference in the wrong area(at the top) as it was loading in before the checkbox was there. I fixed it by moving it to the bottom of the page.

Related

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

humberger menu stop scrolling main body css

I am trying to implement a hamburger menu. My expectation is when I will click on hamburger menu then the whole screen will contain only hamburger menu and there will be no scrolling and I don't want to see any content under body tag. Also I don't want any scroll option in hamburger menu. The whole screen after clicking the hamburger menu icon will contain only menu list.
below is the code for CSS: here #nav.active #menu I'm trying to control the displaying menu. Its connected with Javascript. But I don't get my expected output it always scroll y.
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu(event) {
if (event.type === 'touchstart') event.preventDefault();
const nav = document.getElementById('nav');
nav.classList.toggle('active');
const active = nav.classList.contains('active');
event.currentTarget.setAttribute('aria-expanded', active);
if (active) {
event.currentTarget.setAttribute('aria-label', 'Fechar Menu');
} else {
event.currentTarget.setAttribute('aria-label', 'Abrir Menu');
}
}
btnMobile.addEventListener('click', toggleMenu);
btnMobile.addEventListener('touchstart', toggleMenu);
body,
ul {
margin: 0px;
padding: 0px;
}
a {
color: black;
text-decoration: none;
font-family: sans-serif;
}
a:hover {
background: rgba(0, 0, 0, 0.05);
}
#logo {
font-size: 1.5rem;
font-weight: bold;
}
#header {
box-sizing: border-box;
height: 70px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #e7e7e7;
}
#menu {
display: flex;
list-style: none;
gap: 0.5rem;
}
#menu a {
display: block;
padding: 0.5rem;
}
#btn-mobile {
display: none;
}
#media (max-width: 600px) {
#menu {
display: block;
position: absolute;
width: 100%;
top: 70px;
right: 0px;
background: #e7e7e7;
transition: 0.6s;
z-index: 1000;
height: 0px;
visibility: hidden;
overflow-y: hidden;
}
#nav.active #menu {
height: calc(100vh - 70px);
visibility: visible;
overflow-y: auto;
}
#menu a {
padding: 1rem 0;
margin: 0 1rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
#btn-mobile {
display: flex;
padding: 0.5rem 1rem;
font-size: 1rem;
border: none;
background: none;
cursor: pointer;
gap: 0.5rem;
}
#hamburger {
border-top: 2px solid;
width: 20px;
}
#hamburger::after,
#hamburger::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: currentColor;
margin-top: 5px;
transition: 0.3s;
position: relative;
}
#nav.active #hamburger {
border-top-color: transparent;
}
#nav.active #hamburger::before {
transform: rotate(135deg);
}
#nav.active #hamburger::after {
transform: rotate(-135deg);
top: -7px;
}
}
<header id="header">
<a id="logo" href="">Logo</a>
<nav id="nav">
<button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria- controls="menu" aria-expanded="false">Menu
<span id="hamburger"></span>
</button>
<ul id="menu" role="menu">
<li>Sobre</li>
<li>Produtos</li>
<li>Portfólio</li>
<li>Contato</li>
</ul>
</nav>
</header>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle1"></div>
<div class="circle2"></div>

Dropdown list appears (on hover) even when it's hidden inside the mobile menu

In my navbar I have a li item that opens a dropdown menu when someone hovers over it. In small screens I have a hamburger menu that hides it.
The problem is that in mobile view, even though the li item is "hidden" inside the menu when someone hovers over its position on screen it appears (even though it is hidden inside the menu).
I think that this probably happens because I set "visibility: hidden;" but I don't know how else to do it.
I mean I want to dropdown when someones hover it on desktop view but on mobile I want to dropdown only if someones open the menu and then hover over it (or maybe click on it).
To save space I included below only the code that I find more relevant.
$(function() {
$(".toggle").on("click", function() {
if ($(".item").hasClass("active")) {
$(".item").removeClass("active");
} else {
$(".item").addClass("active");
}
});
});
nav {
background: #3e3e40;
padding: 0 20px;
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
visibility: hidden;
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
visibility: visible;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<li class="dropdwn item">
<span class="item">Categories</span>
<ul class="dropdwn-content">
<li>Product1</li>
<li>Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>

I solved it using media queries
Adjust for whatever pixle size you want
Code Pen Link:
Click Here
<!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=604800" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a href="{%url 'home'%}"><img src="" alt="Company's logo"><a/></li>
</li>
<li class="item">
Home
</li>
<li class="item">
Store
</li>
<!-- dropdwn -->
<li class=" item dropdwn">
<span class="item">Categories</span>
<ul class="dropdwn-content disapear">
<li class="disapear">Product1</li>
<li class="disapear">Product2</li>
</ul>
</li>
<li class="item">
Login
</li>
<li class="item">
Signup
</li >
<li class="item">
<form action="" method='GET' >
<input type="text" placeholder="Search.." name="keyword">
<button type="submit" >
</button>
</form>
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
</body>
nav {
background: #3e3e40;
padding: 0 20px;
}
#media all and (max-width:800px){
.disapear{
display: none;
}
}
ul {
list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover{
color: rgb(189, 169, 136);
}
nav a:focus{
outline: 0;
}
.logo a:hover {
text-decoration: none;
}
.menu li {
font-size: 16px;
padding: 15px 5px;
white-space: nowrap;
}
.logo img{
width: 50px;
height: 40px;
}
.logo{
padding: 0;
flex: 1;
}
.toggle a {
font-size: 20px;
}
nav, ul, li{
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Mobile menu */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.toggle {
order: 1;
}
.cart{
order:1
}
.item {
width: 100%;
text-align: center;
order: 3;
display: none;
}
.login-info{
order:2
}
.item.active {
display: block;
}
/* Navbar Toggle */
.toggle {
cursor:pointer;
}
.bars {
background: #999;
display: inline-block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.bars:before,
.bars:after {
background: #999;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.bars:before {
top: 5px;
}
.bars:after {
top: -5px;
}
/*---------------dropdown li css-------------------*/
.dropdwn {
position: relative;
display: inline-block;
color: white;
}
.dropdwn-content {
opacity: 0;
position: absolute;
background-color: #ffffff;
padding: 12px 16px;
right: 39.5%;
z-index: 1;
height: 0;
}
.dropdwn-content a{
color: #3e3e40;
}
.dropdwn-content li{
color: #3e3e40;
}
.dropdwn-content a:focus{
outline:0;
}
#media all and (min-width: 800px){
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
opacity: 1;
height: auto;
transition: all 250ms ease-in;
}
}
/*------font awesome and pseudo classes navbar-----*/
.fa-lg{
color: rgb(255, 255, 255);
font-size: 26px;
position: relative;
}
.fa-lg::before{
content: '';
border: rgb(255, 255, 255);
border-style: solid;
border-width: 2px;
border-radius: 50%;
position: absolute;
width: 43px;
height: 43px;
right:14px;
top:-8px
}
.badge:after{
content:attr(value);
font-size:18px;
color: #fff;
background: rgb(92, 148, 166);
border-radius:50%;
padding: 0 5px;
position:relative;
left:-2px;
top:-15px;
opacity:0.9;
}
.pseudo::before{
content:attr(username);
display: block;
font-size: 12px;
width: auto;
height: 6px;
margin-bottom: 12px;
}
.circle{
border: #fff;
border-style: solid;
border-radius: 50%;
width: 40px;
height: 40px;
}
/* Tablet menu */
#media all and (min-width: 468px) {
.menu {
justify-content: center;
}
}
/* Desktop menu */
#media all and (min-width: 768px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.item {
order: 2;
}
.menu li {
padding: 15px 10px;
}
.dropdwn {
position: relative;
display: inline-block;
}
.dropdwn-content {
position: absolute;
right: auto;
padding: 12px 16px;
z-index: 1;
}
.dropdwn:hover .dropdwn-content {
display: block;
color: white;
}
.signup{
padding-right: 2rem;
}
.pseudo::before{
width: 10px;
margin-bottom: 10px;
}
.pseudo::after{
content:'';
display: block;
font-size: 13px;
width: auto;
height: 7px;
margin-bottom: 10px;
}
}

Displaying Navbar and Logo contained in Header

Hi I am really new to HTML, CSS and javascript. I am trying to display a logo and navbar flyout all within the header. Can someone tell me how to contain the logo within the header and why the flyout wont show when the screen is re-sized?
If someone could provide me with some direction that would be appreciated.
Thanks in advance
function myFunction() {
var x = document.getElementById("navbar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
#pageHeader {
grid-area: header;
position: relative;
align-content: space-between;
display: inline-block;
object-fit: contain;
}
img{height: 100%;
width:100%;
}
h1 {
position: absolute;
float: left;
display: block;
text-align: left;
vertical-align: bottom;
top: 0;
}
.topnav {
top: 0;
position: absolute;
float: right;
background-color: #333;
overflow: hidden;
display: block;
right: 0px;
}
.topnav a {
float: left;
display: block;
color: #ff6a00;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 20px;
height: 30px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 999px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
position: absolute;
}
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
header, footer, article, nav, div {
padding: 20px;
background: gold;
display:inline-block;
}
.form {
font: 95% Arial, Helvetica, sans-serif;
float: inherit;
width: 800px;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form h1 {
width: auto;
background: #43D1AF;
padding: 20px 0;
font-size: 140%;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form textarea,
.form select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #555;
font: 95% Arial, Helvetica, sans-serif;
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form textarea:focus,
.form select:focus {
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form input[type="submit"],
.form input[type="button"] {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form input[type="submit"]:hover,
.form input[type="button"]:hover {
background: #2EBC99;
}
.rangeslider__ruler:after {
content: "";
display: inline-block;
width: 100%;
}
<!DOCTYPE html>
<link href="StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<header id="pageHeader">
<h1>
<img src="Images/logo.png" height="30" width="30" float="left"/> Melbourne Public Library </h1>
<span class="topnav" id="navbar">
Home
About Us
Survey
Contact Us
Site Map
SurveyResponse.html
☰
</span>
</header>
<article id="mainArticle">
<img src="Images/image1.jpg"/></article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
</html>
The Flyout seems to be hidden or contained in the header?

I think you have to make the pageHeader width 100% and also give a fixed display for the img
#pageHeader {
width:100%;
}
img {
position: fixed;
}

Responsive menu not working on desktop

I'm trying to create a responsive menu, I've got it to work on mobile but when it opens into desktop browser the menu buttons are wonky and not set to full width.
var geolifygeoredirect = document.createElement('script')
geolifygeoredirect.setAttribute('type', 'text/javascript')
geolifygeoredirect.async = 1
geolifygeoredirect.setAttribute('src', '//www.geolify.com/georedirectv2.php?id=32270&refurl=' + document.referrer)
document.getElementsByTagName('head')[0].appendChild(geolifygeoredirect);
/*Javascript*/
$(function() {
var $page = jQuery.url.attr("file");
$('ul.navigation li a').each(function() {
var $href = $(this).attr('href');
if (($href == $page) || ($href == '')) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
/*Javascript End*/
body {
font-family: Helvetica, Arial, sans-serif;
float: left;
margin: 0;
padding: 0;
}
#logo {
z-index: 100;
position: relative;
float: left;
padding-left: 3px;
padding-top: 7px;
}
#menutext {
color: #e30317;
font-size: 22px;
}
#menu {
overflow-y: scroll;
position: absolute;
border-color: #eeeeee;
z-index: -100;
background: #ffffff;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 4.1em;
font-weight: 200;
width: 100%;
margin: inherit;
color: #c6c6c6;
padding-bottom: 0;
height: 300px;
}
#lines {
position: relative;
object-position: center;
border-color: #e30317;
}
ul.navigation {
background: #fff;
}
ul.navigation li a {
text-decoration: none;
}
ul.navigation li a.on {
background: #eeeeee;
padding: 2px 6px;
min-width: 100%;
}
.mobile-menu {
display: block;
background: #c6c6c6;
/*e0b86/*c55555/*e5d1a4/*dcc591/*EFD3A3*/
;
line-height: 100px;
font-weight: 200;
width: 100%;
text-align: center;
position: fixed;
margin: 0 auto;
color: #c6c6c6
}
/*Strip the ul of padding and list styling*/
.mobile-menu ul {
list-style-type: none;
padding-left: 0;
text-align: center;
width: 100%;
position: relative;
background: #c6c6c6;
position: relative;
height: 50px;
}
/*Create a horizontal list with spacing*/
.mobile-menu li {
display: inline-block;
/*float: left;
margin-right: 1px;*/
}
/*Style for menu links*/
.mobile-menu li a {
display: block;
min-width: 130px;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #eee;
text-transform: uppercase;
background: #253746;
text-decoration: none;
margin-left: -15px;
padding: 20px 0;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
font-size: 1.0em;
font-weight: bold;
border-color: #e30317;
border-left: 1px solid;
border-top: 1px solid;
border-right: 3px solid;
border-bottom: 0px solid;
height: 70px;
}
/*Hover state for top level links*/
.mobile-menu li:hover a {
color: #333;
background-color: #eee;
}
/*Style for dropdown links*/
.mobile-menu li:hover ul a {
background: #c6c6c6;
color: #FFF;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.mobile-menu li:hover .mobile-menu ul a:hover {
color: #eee;
}
/*Hide dropdown links until they are needed*/
.mobile-menu li ul {
display: none;
color: #eee
}
/*Make dropdown links vertical*/
.mobile-menu li ul li {
display: none;
float: none;
}
/*Prevent text wrapping*/
.mobile-menu li ul li a {
width: auto;
min-width: 100px;
padding: 0 10px;
}
/*Style 'show menu' label button and hide it by default*/
.mobile-menu .show-menu {
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
padding: 10px 15px;
display: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
}
.mobile-menu .show-menu span {
padding-left: 35px;
}
/*Hide checkbox*/
.mobile-menu input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
.mobile-menu input[type=checkbox]:checked~#menu {
display: block;
color: #333333;
}
/*Responsive Styles*/
#media screen and (max-width: 916px) {
.mobile-menu .lines {
border-bottom: 15px double #f8f8f8;
border-top: 5px solid #f8f8f8;
content: "";
height: 5px;
width: 20px;
padding-right: 15px;
float: right;
}
/*Make dropdown links appear inline*/
.mobile-menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.mobile-menu li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.mobile-menu ul li,
.mobile-menu li a {
width: 100%;
}
/*Display 'show menu' link*/
.mobile-menu .show-menu {
display: inherit;
color: #fff;
}
}
/* Test CSS END*/
}
}
#media screen and (min-width: 481px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#pager {
width: 481px;
}
#media screen and (min-width: 916px) {
/* comes into effect for screens larger than or equal to 481 pixels */
#page {
min-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Face Masks</title>
<nav class="mobile-menu"><img id="logo" style="float: left;" src="http://go.jsp.co.uk/images/eyemenu.png">
<label for="show-menu" class="show-menu"> <div style="text-align: left;"></div> <span id="menutext" >Eye Safety</span><div class="lines" id="lines" style="color: #e30317;" ></div></label>
<input type="checkbox" id="show-menu">
<ul class="menu" id="menu">
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/Headmini.png">Head Safety</li>
<li><img style="display: block; position: relative; float: left; padding-top: 33px;" src="http://go.jsp.co.uk/images/hearingmini.png">Hearing Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/FullHalfmini.png">Face Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/disposablemini.png">Disp. Masks</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/eyemini.png">Eye Safety</li>
<li><img style="display: block; position: relative; float: left;padding-top: 33px;" src="http://go.jsp.co.uk/images/Contactmini.png">Contact</li>
</ul>
</nav>
</head>
<body>
<div style="padding-top: 113px">
<img src="http://go.jsp.co.uk/images/eye.png" style="width:100%; background-color: #253746" border="0" alt="Null">
</div>
</body>
</html>

jQuery is missing in your document (I get a Uncaught ReferenceError: $ is not defined when I run your snippet).
To add jQuery, add this line to your <head> section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Thanks Guys its sorted the alignment out but just very bunched up in desktop browser not set to full width.

Categories