I have created a Navigation bar and that contain Toggle Button .The problem I am facing is in the responsive view, after clicking on the toggle button ,the toggle button hides and shows the navigation bar.
But after hiding the toggle button I want to show another button upon which clicking the navigation bar hides.
I don't understand what I'm doing wrong and what should I do?
Here is The code is:
let menuBar=document.querySelector('#menu-bar');
navBar=document.querySelector('.navbar');
menuBar.onclick=()=>{
menuBar.classList.add('hide');
// menuBar.classList.add('fa-times');
navBar.classList.add('show');
times();
}
let icon="fas fa-times";
function times(){
if(navBar.classList.contains('show')){
menuBar.innerHTML=`<i class="${icon}"></i>`;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
header{
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow:5px 5px 7px rgba(0,0,0,0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1{
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li{
margin-right: 3rem;
}
header .navbar ul li a{
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar{
font-size: 20px;
cursor: pointer;
display:none;
}
/*media query*/
#media (max-width:768px){
html{
font-size: 55%;
}
header #menu-bar{
display: block;
}
header #menu-bar.hide{
opacity: 0;
pointer-events: none;
}
header .navbar{
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show{
opacity: 1;
}
header .navbar ul{
flex-flow: column;
padding: 2rem;
}
header .navbar ul li{
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a{
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times{
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
Some notes:
It was not working previously because you did not remove the hide class after adding it to menuBar
You are nesting an icon in an icon - not recommended
You are performing unnecessary checks - you should just use classList.toggle() instead
Here's the working code:
let menuBar = document.querySelector('#menu-bar');
navBar = document.querySelector('.navbar');
menuBar.onclick = () => {
navBar.classList.toggle('hide');
navBar.classList.toggle('show');
times();
}
let icon = "fas fa-times";
function times() {
menuBar.classList.toggle('fa-times');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
header {
top: 0;
left: 0;
position: fixed;
background: #fff;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.4);
width: 100%;
padding: 1.5rem 10%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 30px;
color: rgb(225, 156, 65);
text-transform: capitalize;
}
header .navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
header .navbar ul li {
margin-right: 3rem;
}
header .navbar ul li a {
text-decoration: none;
font-size: 1.3rem;
color: #568aef;
text-transform: capitalize;
}
#menu-bar {
font-size: 20px;
cursor: pointer;
display: none;
}
/*media query*/
#media (max-width:768px) {
html {
font-size: 55%;
}
header #menu-bar {
display: block;
}
header #menu-bar.hide {
opacity: 0;
pointer-events: none;
}
header .navbar {
position: fixed;
top: 8rem;
left: 0;
background: #568aef;
width: 100%;
opacity: 0;
}
header .navbar.show {
opacity: 1;
}
header .navbar ul {
flex-flow: column;
padding: 2rem;
}
header .navbar ul li {
width: 100%;
margin: 1.5rem;
}
header .navbar ul li a {
color: #fff;
display: block;
padding-left: 2rem;
font-size: 2rem;
border-left: 0.3rem solid #fff;
}
.fa-times {
transform: rotate(180deg);
opacity: 1;
font-size: 20px;
color: black;
}
}
<!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>Nav4</title>
<!--fontawsome cdn link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="css/nav4.css">
</head>
<body>
<header>
<h1>ninja codes</h1>
<div id="menu-bar" class="fas fa-hamburger"></div>
<nav class="navbar hide">
<ul>
<li>Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>login</li>
</ul>
</nav>
</header>
<!--jquery cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--custom js file link-->
<script src="nav4.js"></script>
</body>
</html>
Related
I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click' ,function (){
navbarLinks.classList.toggle('active')
});
/* Basic/Boiler css */
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
/* nav bar */
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo{
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li{
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a{
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover{
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button{
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px){
.toggle-button{
display: flex;
}
.navbar-links{
width: 100%;
}
.navbar-links ul{
flex-direction: column;
width: 100%;
display: none;
}
.navbar-links li a{
padding: 10px;
}
.navbar-links li{
text-align: center;
}
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-links.active{
display: flex;
}
}
<!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>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
I repeat Again The hamburger appers alright but when i click it it dose not respond
You forgot to add class .active in your CSS file. Also, your .navbar-links should have display:none; instead of its list.
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
toggleButton.addEventListener('click', function() {
navbarLinks.classList.toggle('active');
});
/* Basic/Boiler css */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
/* nav bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #000;
color: white;
}
.navbar-logo {
width: 10rem;
height: 3rem;
margin: 0.5rem;
border-radius: 4px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
transition: font-size 0.5s ease-out 100ms;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-right: 1rem;
display: block;
}
.navbar-links li:hover {
font-size: 1.4rem;
}
/* Responsive Navbar */
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
#media (max-width: 650px) {
.toggle-button {
display: flex;
}
.navbar-links {
width: 100%;
display: none;
}
.active {
display: block;
padding: 25px;
color: white;
font-size: 25px;
box-sizing: border-box;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links li a {
padding: 10px;
}
.navbar-links li {
text-align: center;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links .active {
display: flex;
}
}
<!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>Document</title>
<link rel="icon" href="/logo.png" type="image/jpg">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="front.js"></script>
</body>
</html>
You have set the style for the ul as display: none. display: none needs to be overridden when the active class is applied.
Add this rule ul {display: flex} at the end of the media query, your code should look something like this:
#media (max-width: 650px){
...
.navbar-links.active ul{
display: flex
}
}
I am working on a school project I want to do a responsive text which is similar to the picture below and further when it switch to mobile view the text have to change its position and fit below the hero image.
how to change the size according to the screen size?
I am a beginner trying to learn things on my own.
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.img-hover-zoom {
height: 500px;
overflow: hidden;
float: left;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.5);
}
.hero-text {
grid-area:auto;
overflow: hidden;
text-align: left;
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
}
h1 {
text-align: left;
text-transform: uppercase;
font-family: Agency FB, Helvetica, sans-serif;
font-size: 2em;
}
p {
font-size: 3vh;
font-family: Arial, Helvetica, sans-serif;
}
#media (max-width: 650px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="img-hover-zoom">
<img src="/img/hero.jpg" alt="This zooms-in really well and smooth" width="500px" height="500px">
</div>
<div class="hero-text">
<h1>Travel around the World</h1>
<br><br>
<p>Traveling is a very crucial part of life as it is the best way to get out of the busy schedule.
It is also to experience life in different ways.Traveling is actually a good remedy for stress, anxiety
and depression. It also improves the mental and physical health. We only have one life and
we should thank it for making us more advanced creature on this planet. Not only do we get to
experience the beauty of nature, different geographies ,topographies, and people.
</p>
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
on my website
when clicking on the bars its meant to open a menu, i am following a youtube video and his works fine however mine isn't working.
hotel website tutorial
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click',function (){
header.classList.toggle('menu-open');
});
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html{
font-size: 10px;
}
body{
font-family: 'Open Sans', sans-serif;
font-size:1.6rem;
color: var(--dark-color);
}
a{
text-decoration: none;
color:inherit;
}
ul{
list-style: none;
}
section{
padding: 5rem 0;
}
/*reusable styles*/
.container{
width:100%;
max-width:120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header{
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left:0;
background-color: var(--purple-transparent);
z-index:999;
}
/*header styles - nav*/
.nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img{
max-width: 80%;
}
.hamburger-menu{
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times{
display: none;
}
.menu-open .hamburger-menu .fa-times{
display: block;
}
.menu-open .hamburger-menu .fa-bars{
display: none;
}
.nav-list{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display:flex;
flex-direction: column;
align-items:center;
z-index:1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child){
margin-bottom: .5rem;
}
.nav-link{
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header"></header>
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
I believe the
.menu-open .nav-list{
opacity: 1;
transform: scale(1);
}
part is meant to be triggered when the javascript is run to make the menu visible
You did not move all your menu code inside header as you should.
your header is just opened then closed: <header class="header"></header>
<header class="header">
// move code here
</header>
It should go:
.menu-open .hamburger-menu .fa-bars {
display: none;
}
and you where putting menu-open outside so .menu-open .hamburger-menu .fa-bars never happen.
// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
console.log(true)
header.classList.toggle('menu-open');
})
/*Import the fonts used*/
#import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Custom properties*/
:root {
--dark-color: #2d2c2c;
--purple-solid: #350a4f;
--purple-transparent: rgba(53, 10, 79, .7);
--purple-transparent-alt: rgba(53, 10, 79, .5);
--purple-light: #8f50fb;
--yellow-solid: #fa9e2c;
--gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
--gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html {
font-size: 10px;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
color: var(--dark-color);
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
section {
padding: 5rem 0;
}
/*reusable styles*/
.container {
width: 100%;
max-width: 120rem;
padding: 0 1.5rem;
margin: 0 auto;
}
/*header styles*/
.header {
width: 100%;
height: 6rem;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
background-color: var(--purple-transparent);
z-index: 999;
}
/*header styles - nav*/
.nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
max-width: 80%;
}
.hamburger-menu {
font-size: 2.6rem;
color: #fff;
cursor: pointer;
position: relative;
z-index: 1500;
}
.hamburger-menu .fa-times {
display: none;
}
.menu-open .hamburger-menu .fa-times {
display: block;
}
.menu-open .hamburger-menu .fa-bars {
display: none;
}
.nav-list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--purple-solid);
display: flex;
flex-direction: column;
align-items: center;
z-index: 1400;
opacity: 0;
transform: scale(0);
transition: opacity .5s;
}
.menu-open .nav-list {
opacity: 1;
transform: scale(1);
}
.nav-item:not(:last-child) {
margin-bottom: .5rem;
}
.nav-link {
display: block;
color: #fff;
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
padding: 1rem;
}
more writing because stuff this I swear this is an easy fix but I'm just dumb
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Travelix</title>
<!--Font awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div class="container"></div>
<nav class="nav">
<a href="index.html" class="logo">
<img src="./images/logo.png" alt="">
</a>
<div class="hamburger-menu">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Offers
</li>
<li class="nav-item">
News
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
</header>
<script src="main.js"></script>
</body>
</html>
voted to close due to typo.
Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.
Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.
Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Basically, I am trying to create a navigation bar that has a dropdown hover effect. Right now, I have already created the navigation bar, but I am struggling to make the dropdown effect. I would like the dropdown effect to be shown when the user hovers over the tab in the navigation bar called "Works." When hovered, I would like there to be 2 separate tabs that the user can click to navigate to. Is there any way to do this? Here is my code. Thanks.
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
}
h3 {
color: #3F69CA
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: "Roboto";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Roboto";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Roboto";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto";
}
header ul li {
position: relative;
list-style: none;
font-family: "Roboto";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Roboto";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Roboto";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
Works
</li>
<li>
Contact
</li>
</ul>
</header>
<script src="script.js"></script>
</body>
</html>