I'm making a very basic page with header, small navigation with the last option as a drop-down menu, and a bootstrap carousel plug-in. Since I added the carousel the dropdown menu doesn't work.
I'm relatively new to coding and learning by making this page. The dropdown menu should come from the 'collections' link with 2 other options.
The code for the carousel was edited from w3school.com and I have tried changing the margins so it doesn't overlap with my drop-down but no luck. Wondering if there is a problem with the jquery links I am using or if I have missed something from the code? I've taken some bits out below so there's not too much sorting through things that I didn't think were relevant (.main, .active, .drop-down container etc) but if I need to re-include them on here please let me know.
Any help would be very much appreciated! Many thanks.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
#header {
text-align: left;
color: #294ccf;
position: absolute;
width: 300px;
height: 100px;
padding-left: 20px;}
h1 {
color: #294ccf;
font-family: arial;
font-weight: bold;
position:fixed;
font-size: 18pt;
text-decoration: none;
text-align: left}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
background-color: ;
overflow-x: hidden;
padding-top: 0px;
margin-top: 90px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
color: #294CCF;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
text-align: left;
text-decoration: none;}
.sidenav a, .dropdown-btn {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
color: #294CCF;
display: block;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
position: relative;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: normal;}
.fa-caret-down {
float: right;
padding-right: 8px;
color: #294CCF; }
.carousel {margin-left 100px;
margin-top:180px;}
.carousel-control.left, .carousel-control.right {
background-image: none}
</style>
<div id="header">
<h1>Robyn Smith<br>Jewellery + objects</h1>
</div>
<div class="sidenav">
Bio
Portfolio
<button class="dropdown-btn">Collections
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Sports Day
Putin
</div></div>
<div class="container">
<div id="myCarousel" class="carousel" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/sportsday1.jpg" alt="Badges" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday2.jpg" alt="Bag" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday3.jpg" alt="Neckpiece" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" ></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
The script in your body has a comment which is opened incorrectly. Comments in javascript can be:
Single line: // This is a single line comment
Multi line: /* This is a multi line comment */
Your code has the following line which breaks the application:
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
The compiler now only recognises this as a single line comment because of the // at the start, thus the rest of the code won't work anymore. The compiler now tries to interpret the lines such as "dropdown content - ..." as javascript, which is isn't. Remove the first slash to make it a multi line comment and your code should be fixed!
Firstly let's correct your css code basic syntax errors:
Head: Href for bootstrap.min.css can't be put into 2 lines. It must be kept on one line.
Body: line-height: normal, "sans-serif";
.sidenav: background-color: ; empty
.sidenav a:hover...: empty rulesets
.carousel: margin-left: 100px;
Your javascript is not commented correctly. Either use
Single line comments // This is comments
Multi line /* This is a comment */
There were multiple minor bugs. Scripts order were wrong. Bootrstrap requires jQuery, so it has to be put before. You also added some spaces to the Bootstrap CSS link, which broke it. It was:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
Fixed to:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
The comment was meant for one line, so it threw an error as well.
It was:
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
Fixed to:
/* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
Also removed some CSS lines that were not finished, just to keep you noticed.
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
#header {
text-align: left;
color: #294ccf;
position: absolute;
width: 300px;
height: 100px;
padding-left: 20px;
}
h1 {
color: #294ccf;
font-family: arial;
font-weight: bold;
position: fixed;
font-size: 18pt;
text-decoration: none;
text-align: left
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 0px;
margin-top: 90px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
color: #294CCF;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
text-align: left;
text-decoration: none;
}
.sidenav a, .dropdown-btn {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
color: #294CCF;
display: block;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
position: relative;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: normal;
}
.fa-caret-down {
float: right;
padding-right: 8px;
color: #294CCF;
}
.carousel {
margin-left: 100px;
margin-top: 180px;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
</style>
<div id="header">
<h1>Robyn Smith<br>Jewellery + objects</h1>
</div>
<div class="sidenav">
Bio
Portfolio
<button class="dropdown-btn">Collections
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Sports Day
Putin
</div>
</div>
<div class="container">
<div id="myCarousel" class="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/sportsday1.jpg" alt="Badges" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday2.jpg" alt="Bag" style="width:100%;">
</div>
<div class="item">
<img src="img/sportsday3.jpg" alt="Neckpiece" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
</body>
Related
I am trying to make a website for my f1 in schools team and I want to know how I can make a button in my nav bar change bg and font color when I am on that part of the page even with scrolling and clicking on the button. If I am right I need CSS and JS right??
I need help only in the navbar else my website is completely responsive and perfect according to me.
HTML
<html>
<button onclick="topFunction()" id="myBtn" title="Back to top">Back to Top</button>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="main">
<head>
<title>Night Wolves</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="w3-light-white w3-margin">
<!-- Navigation bar -->
<nav class="navbar" id="thebar" style="position: relative; top: -1px; position: sticky;">
<div class="content">
<div class="logo">
<a style="position: relative; top: -7px;" href="#Home">Night Wolves</a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a class="btn" href="#Home">Home</a></li>
<li><a class="btn active" href="#Members">Members</a></li>
<li><a class="btn" href="#About us">About Us</a></li>
<li><a class="btn" href="#Portfolio">Portfolio</a></li>
<li><a class="btn" href="#Contact us">Contact Us</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars" style="position: relative; right: -10px; top: -6px;"></i>
</div>
</div>
</nav>
<div class="w3-content" style="max-width:1500px">
<!-- Image and background with title -->
<header class="w3-display-container w3-wide" style="padding-bottom:32px;" id="Home">
<img class="w3-image"
src="F1CarBG.png"
alt="Photo by Jamie Street" width="1600" height="1060">
<div class="w3-display-left w3-padding-large">
<h1 class="F1teamtext"><b style="font-size: 6vw; color: #8B008B;">F1 TEAM</b></h1>
<h1 class="nightwolvestext"><b style="color: yellow; font-size: 6vw;">NIGHT
WOLVES</b>
</h1>
</div>
</header>
<!-- Members -->
<div class="w3-row-padding" id="Members">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow; position: relative; bottom: -40px;" ,class="w3-wide w3-center">MEMBERS</h2>
<p style="color: yellow; position: relative; bottom: -40px;" ,class="w3-opacity w3-center"><i>"There is no 'I' in team."</i></p>
<br>
<p class="w3-white w3-text-black w3-left-align">
</p>
</div>
<div class="w3-third w3-margin-bottom" id="Arnav">
<div class="w3-card-4" style="position: relative; left: -15px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Arnav</h3>
<p style="color: white;" ,class="w3-opacity">Marketing Manager</p>
<p> </p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kevin</h3>
<p style="color: white;" ,class="w3-opacity">Team Manager</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Chislon</h3>
<p style="color: white;" ,class="w3-opacity">Resource Manager</p>
</div>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kiran</h3>
<p style="color: white;" ,class="w3-opacity">Manufacturing Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -5px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Aaron</h3>
<p style="color: white;" ,class="w3-opacity">Design Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Fadil</h3>
<p style="color: white;" ,class="w3-opacity">Graphic Designer</p>
<p> </p>
</div>
</div>
</div>
<!-- About Us-->
<div class="w3-row-padding" id="About us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">ABOUT US</h2>
<p class="w3-white w3-text-black w3-left-align">
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> We are the Night Wolves</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> This is our team of 6 racers Kevin, Arnav,
Chislon,
Fadil,
<br>
Aaron
and Kiran.
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">We will never give up in the field of
racing.
</p>
<!-- Portfolio -->
<div style="position: relative; bottom: -400px;" class="w3-row-padding" id="Portfolio">
<div class="w3-center w3-padding-32">
<div style="position: relative; top: -350px;">
<h2 style="color: yellow; text-align: top;" ,class="w3-wide w3-center">PORTFOLIO</h2>
<p class="w3-white w3-text-black w3-left-align">
</div>
</p>
<!-- Contact us-->
<div class="w3-row-padding" id="Contact us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">CONTACT US!</h2>
<!doctype html>
<html lang="en" style="background-color: #5518AB;">
<head style="background-color: #5518AB;">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body style="background-color: #5518AB;">
<div class="container mt-5" style="background-color: #5518AB;">
<form class="row g-3" action="https://formsubmit.co/a19d9c2e5e9b57c704f25be5e736c312" method="POST">
<input type="text" name="_honey" style="display: none;">
<input type="hidden" name="_captcha" value="false">
<div class="col-md-6" style="color: white;">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" name="name" id="firstName" required>
</div>
<div class="col-md-6" style="color: white;">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" name="Last Name" id="lastName" required>
</div>
<div class="col-md-8" style="color: white;">
<label for="emailInfo" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="emailInfo" required>
</div>
<div class="col-md-12" style="color: white;">
<label for="comments" class="form-label">Comments, questions?</label>
<textarea class="form-control" id="comments" name="comments, questions" rows="3" required></textarea>
</div>
<div class="col-md-12" style="color: white;">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
<button onclick="topFunction()" id="myBtn" title="Go to top"> Back to Top</button>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</div>
CSS
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #5518Ab;
}
::-webkit-scrollbar-thumb {
background: yellow;
}
::selection{
background: yellow;
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background: yellow;
}
.navbar.sticky{
background: yellow;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: purple;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: purple;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: orange;
background-color: purple;
}
.logo:hover{
background-color: orange;
}
.banner{
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}
.icon{
color: purple;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content{
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbar .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: yellow;
transition: all 0.3s ease;
}
.navbar.show .menu-list{
left: 0%;
}
.navbar .menu-list li{
margin-top: 45px;
}
.navbar .menu-list li a{
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a{
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a{
font-size: 27px;
}
}
#media (max-width: 380px) {
.aboutustext {
position: relative;
bottom: -225px;
}
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -300px;
left: -10px;
}
}
.tlogo {
width: 25%;
height: auto;
position: relative;
left: -350px;
}
.carbg {
width: 25%;
height: auto;
position: relative;
right: -400px;
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -400px
}
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: yellow;
cursor: pointer;
font-size: 18px;
color: purple;
}
/* Style the active class, and buttons on mouse-over */
.active, .thebar:hover {
background-color: yellow;
color: purple;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: yellow; /* Set a background color */
color: purple; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: orange; /* Add a dark-grey background on hover */
}
html {
scroll-behavior: smooth;
background-color: #5518AB;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto"
}
body {
font-family: "Source Sans Pro"
}
Try using a style based on the body class. If you're on the Home page for example, you might see <body class="home"> and then you can create a style like
body.home button {
background-image: ...;
color: #fff;
}
Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>
You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.
I'm currently making a quick throw together website with e.js & Express.
However, upon learning to use tags I'm having some issues with using an if-else statement within e.js tags.
I'm my if statement works just fine, however when I add an else statement is when problems arise.
(Just FYI this code takes place within a partial)
Full file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/CaffLogWhite.png">
</head>
<header>
<nav>
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% } %>
<% else { %>
<% } %>
</ul>
</div>
<hr>
</nav>
</header>
<style>
nav t {
float: left;
position: relative;
color: #323232;
font-family: 'Quicksand', sans-serif;
margin-top: 20px;
font-family: 'Oleo Script Swash Caps', cursive;
}
nav {
position: fixed;
width: 100%;
text-decoration: none;
display: inline-block;
font-size: 28px;
}
nav ul {
display: table;
margin: 0 auto;
width: 60%;
text-decoration: none;
list-style-type: none;
color: #323232;
overflow: auto;
height: 20px;
}
nav ul li a {
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
.nav-logo {
float: left;
}
nav ul li {
color: #323232;
display: inline-block;
margin-right: 40px;
margin-top: 28px;
list-style-type: none;
font-size: 24px;
}
nav ul button {
display: inline-block;
float: right;
background: #7289DA;
color: white;
text-decoration: none;
list-style-type: none;
font-family: 'Quicksand', sans-serif;
font-size: 18px;
width:103px;
height:57px;
border-radius: 8px;
margin-right: -142px;
}
nav ul button:hover {
background: #3857c7;
}
</style>
</html>
The full error I get is the following:
E:\dev\CaffeinatedWebsite\views\profile.ejs:10 8| </title> 9| <link rel='stylesheet' href='/stylesheets/style.css' /> >> 10| <%- include('./partials/header.ejs', { user } ) %> 11| </head> 12| 13| <div class="welcome-message-caff"> Unexpected token 'else' in E:\dev\CaffeinatedWebsite\views\partials\header.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.
If anybody could provide me any clarity on how to fix this issue, that would be great!
Thanks in advance.
This should work for you. The ending "if" bracket and the "else" statement should be on the same line.
<div class="nav-wrapper">
<a href="/">
<img class="nav-logo" src="images/CaffLogBlack.png" alt="CaffeinatedLogo" style="width:95px;height:95px;">
<t style="font-size: 36px">
<b>Caffeinated</b>
</t>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Terms of Service</li>
<li>FAQ</li>
<% if (user) { %>
<a href="/auth">
<button class="btn">
<span>Login with Discord</span>
</button>
</a>
<% }else{ %>
<% } %>
</ul>
</div>
I am trying to create a nav bar with submenus but when I open the submenu I am not able to click on the list. The hovered list isn't staying open for me to click on it.
$('.one').hover(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.yo {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 100%;
top: 30%;
}
.yo a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
<div class="yo">
Link 1
Link 2
Link 3
</div>
Link 2
<div class="yo">
Link 4
Link 5
Link 6
</div>
Link 3
<div class="yo">
Link 7
Link 8
Link 9
</div>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
When I click on Dropdown--> Hover over Link 1 and now I want to select Link 1 in the sub-submenu that opens when you hover. Is there anyways I can keep the link open long enough to click the link.
Notice how the "dropdown" link has everything within it's DIV and just with css :hover it is showing/hiding the menu. You need to put the button "one" and submenu "yo" both in one div and do css :hover on the div. No need jquery.
The html:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="submenu">
Link 1
<div class="yo">
Link 1
Link 2
Link 3
</div>
</div>
<div class="submenu">
Link 2
<div class="yo">
Link 4
Link 5
Link 6
</div>
</div>
<div class="submenu">
Link 3
<div class="yo">
Link 7
Link 8
Link 9
</div>
</div>
</div>
</div>
</div>
Add this css:
.submenu:hover .yo {
display: block;
}
Remove the JQuery hover.
Here is the working fiddle
my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)
With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}