I'm very new to coding and have been following tutorials to learn coding. I have very successfully created a hamburger menu after following a tutorial and I'm totally chuffed!
My happiness soon faded away when I realised that the mobile menu doesn't disappear if I forget to click the X and expand the screen. The Menu remains. I have attached the Code and HTML and CSS. Please can someone help me write the correct code to make it disappear?
I have tried to do this with CSS by adding 'display: none' to the mobile_menu and mobile_menu bottom' ... and also tried moving it with the transitionX(100%) but to no luck.
So I'm guessing this a JS related issue which I have 0 knowledge at the moment.
sadly I can't post images because I don't have 10 reputations. sad. so I'll try and paste it here.
hamburger
<div>
<button type="button" class="hamburger" id="menu-btn" >
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img src="images/pin.png" alt="locator">
<span>locate us</span></a>
</div>
</div>
</div>
CSS Code:
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img
{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a
{
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
mobile menu
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%),
inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.hidden {
transform: translateX(100%);
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;}
}
JS SCRIPT
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
The problem is in the mobile menu CSS section. You have to add translateX(100%) to mobile-menu to hide the mobile menu on a bigger screen by default.
For the smaller screen change it to translateX(0%) so that it shows the menu when the 'hidden' class is not active.
And move the .hidden{translateX(100%)} to the 1080px media query as it is not needed for the bigger screen. The changes are wrapped inside the comments.
const btn = document.getElementById('menu-btn')
const nav = document.getElementById('menu')
function navToggle() {
btn.classList.toggle('open')
nav.classList.toggle('hidden')
document.body.classList.toggle('no-scroll')
}
btn.addEventListener('click', navToggle)
.navbar{
width: 100%;
height: auto;
background-color: #F6F6F4;
padding:20px;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%),
0 2px 2px rgb(0 0 0 / 6%),
0 0 2px rgb(0 0 0 / 7%);
}
.navbar-container{
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar-brand img{
width: 320px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar-nav-left{
text-transform: uppercase;
font-size: .9rem;
}
.navbar-nav-right img{
height: 20px;
width: 20px;
margin-right: 20px;
}
.navbar-nav-right li:first-child a {
display: flex;
align-items: center;
}
.btn {
cursor: pointer;
display: inline-block;
background: none;
border: 1px #000 solid;
border-radius: 50px;
padding: 7px 16px;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.donate {
background-color: var(--Purple);
border: none;
font-size: 1rem;
}
.donate:hover {
background-color:white;
font-size: 1rem;
color: #000000;
}
.donate_button{
color: white;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
position: relative;
background: none;
border: none;
z-index: 10;
transition: all 0.25s;
padding: 0 25px;
display: none;
}
.top, .middle, .bottom {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 2px;
background: #000000;
transform: rotate(0);
transition: all 0.5s;
}
.middle {
transform: translateY(7px);
}
.bottom {
transform: translateY(14px);
}
.open .top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .middle {
opacity: 0;
}
.open .bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
.mobile-menu {
position: fixed;
background-color:#abc09f;
top: 161px;
right:0;
width: 90%;
height: 100%;
padding: 30px;
box-shadow: inset 0 4px 3px -3px rgb(0 0 0 /10%), inset 0 4px 2px -2px rgb(0 0 0 /7%);
transition: all 0.3s;
/* ------------------Change here---------------*/
transform: translateX(100%); /* add translateX(100%) to hide the menu in bigger screen by default */
/* ------------------Change here---------------*/
}
.mobile-menu-bottom .nav__img{
max-width: 10px;
height: 10px;
}
.mobile-menu div a {
display: flex;
align-items: center;
font-size:1rem;
}
.no-scroll {
overflow: hidden;
}
#media(max-width: 768px){
.hamburger {
display: block;
}
.navbar-brand img{
width: 220px;
height:113px;
margin: auto 0;
margin-left: 25px;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
}
#media(max-width:1080px){
.hamburger {
display: block;
}
.navbar .navbar-nav-left,
.navbar .navbar-nav-right{
display: none;
}
/* ------------------Change here---------------*/
.mobile-menu{
transform: translateX(0%); /* Here mobile-menu will be shown if hidden class is not active */
}
.hidden {
transform: translateX(100%); /* And the menu will hide again if the hidden class is active*/
}
/* ------------------Change here---------------*/
}
<div>
<button type="button" class="hamburger" id="menu-btn" aria-label="hamburger">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
<div class="mobile-menu hidden" id="menu">
<ul>
<li>worship and music</li>
<li>visit us</li>
<li>support us</li>
</ul>
<div class="mobile-menu-bottom">
<button class="btn donate">donate</button>
<a href="#"><img class="nav__img" src="https://img.freepik.com/premium-vector/location-icon-simple-symbol-red-pin-sign_399998-369.jpg?w=2000" alt="locator">
<span>locate us</span></a>
</div>
</div>
Related
I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.
It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.
Thanks a ton if you can help!
I'll take notes. lol
Updated Website
What I am trying to do.
What I am currently dealing with.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.
Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links {
/* added this */
display: none;
padding-block: 19px;
justify-content: center;
gap: 0.5rem;
}
.mobile-nav.is-active .mobile-social-links {
/*added this */
display: flex;
}
.mobile-social-links a {
/* added this */
display: inline;
padding: 0;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active,
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li>
<img src="images/social-icons/twitter-icon.png">
</li>
<li>
<img src="images/social-icons/linkedin-icon.png">
</li>
<li>
<img src="images/social-icons/youtube-icon.png">
</li>
<li>
<img src="images/social-icons/facebook-icon.png">
</li>
<li>
<img src="images/social-icons/instagram-icon.png">
</li>
</ul>
</div>
</nav>
I've also done a version with grid but it means only one menu is needed. See below:
const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('is-active');
menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: opacity 0.3s;
cursor: pointer;
}
#header-logo:hover {
opacity: 50%;
}
.hamburger {
grid-area: hamburger;
justify-self: end;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
background-color: var(--light);
transform-origin: 0 0;
transition: transform 0.4s;
}
.hamburger.is-active span {
margin-bottom: 6px;
background-color: #757575;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
}
.container {
display: grid;
grid-template-columns: fit-content(0) 1fr;
grid-template-areas: "icon hamburger" "menu menu";
}
.image-container {
grid-area: icon;
}
.menu {
grid-area: menu;
max-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #222222;
transition: max-height 1s, margin-top 1s;
}
.menu a {
text-align: center;
color: var(--light);
font-size: 1.5rem;
margin: 0 1rem;
text-decoration: none;
transition: color 0.4s;
padding: 19px 0;
border-bottom: solid 1px #363636;
}
.menu.is-active {
max-height: 100vh;
margin-top: 1rem;
}
.menu a:hover {
color: #757575;
}
.menu a:active {
color: var(--light);
}
.mobile-social-links {
padding: 19px;
}
.mobile-social-links>ul {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-social-links a {
padding: 0;
}
#media only screen and (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
justify-content: flex-end;
flex-direction: row;
background: none;
display: flex;
max-height: initial;
margin-top: 0;
}
.menu a {
text-align: left;
font-size: 1rem;
border-bottom: none;
}
.mobile-social-links {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
grid-template-areas: "icon menu";
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
<div class="container">
<div class="image-container">
<img src="https://www.fillmurray.com/500/500" id="header-logo">
</div>
<div class="menu">
about
services
portfolio
blog
contact
<div class="mobile-social-links">
<ul>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-youtube"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
</ul>
</div>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
Try adding display: flex to the ul with the .mobile-social-links class.
const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
hamburger.addEventListener('click', function () {
hamburger.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
})
:root {
--light: #FFF;
--dark: #111;
}
#font-face {
font-family: roboto-light;
src: url(fonts/Roboto-Light.ttf);
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: roboto-light;
}
.container {
max-width: 1120px;
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 10px 12px 20px;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: var(--dark);
}
#header-logo {
width: 42px;
transition: 0.3s;
}
#header-logo:hover {
opacity: 50%;
cursor: pointer;
}
#header-logo:active {
opacity: 100%;
cursor: pointer;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 30px;
height: 2px;
margin-bottom: 7px;
position: relative;
background-color: var(--light);
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger span:nth-child(1) {
margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(30px);
margin-bottom: 6px;
background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
margin-bottom: 6px;
background-color: #757575;
}
.mobile-nav {
position: fixed;
left: 100%;
min-height: fit-content;
z-index: 98;
background-color: #222222;
padding-top: 66px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
font-size: 24px;
text-align: center;
display: block;
padding: 19px 0px 19px;
width: 100vw;
border-bottom: solid 1px #363636;
background-color: var(--primary);
color: var(--light);
text-decoration: none;
}
.mobile-social-links img {
width: 28px;
}
.mobile-social-links li {
list-style: none;
width: 28px;
display: inline;
}
.menu {
display: none;
flex: 1px 1px 0%;
justify-content: flex-end;
margin: 0px -16px;
}
.menu a {
color: var(--light);
font-size: 16px;
margin: 0px 16px;
text-decoration: none;
transition: 0.4s;
padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
color: #757575;
}
.menu a:active{
color: var(--light);
}
ul.mobile-social-links{
display: flex;
}
#media (min-width: 780px) {
.hamburger {
display: none;
}
.menu {
display: flex;
}
.mobile-nav {
display: none;
}
#header-logo {
width: 80px;
padding-left: 22px;
}
.container {
padding: 16px 50px 16px 30px;
margin: 0px auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Zachery Vaughn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="container">
<img src="images/logos/Logo-White-500.png" id="header-logo">
<div class="menu">
about
services
portfolio
blog
contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<nav class="mobile-nav">
about
services
portfolio
blog
contact
<div>
<ul class="mobile-social-links">
<li><img src="images/social-icons/twitter-icon.png"></li>
<li><img src="images/social-icons/linkedin-icon.png"></li>
<li><img src="images/social-icons/youtube-icon.png"></li>
<li><img src="images/social-icons/facebook-icon.png"></li>
<li><img src="images/social-icons/instagram-icon.png"></li>
</ul>
</div>
</nav>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
The rules are still being applied to your links in the other ul as they still match.
I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css
I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```
I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
I would like to ask how can I make my existing navbar a sticky one?
I've tried adding in the Javascript..But the alignments seem to be off.
i am taking reference from https://codingartistweb.com/2021/12/responsive-navigation-bar-html-css-js/#comment-4063 and also https://codingartistweb.com/2020/10/sticky-navbar-html-css-and-javascript-tutorial/.
document.addEventListener('DOMContentLoaded', function(){
var nav = document.getElementById("navbar");
var current_pos = nav.offsetTop;
window.onscroll = function(){
var window_pos = document.documentElement.scrollTop;
if(window_pos>=current_pos){
nav.classList.add("sticky");
}
else{
nav.classList.remove("sticky");
}
}
} )
const navToggler = document.querySelector(".nav-toggler");
const navMenu = document.querySelector(".site-navbar ul");
const navLinks = document.querySelectorAll(".site-navbar a");
allEventListners();
function allEventListners() {
navToggler.addEventListener("click", togglerClick);
navLinks.forEach((elem) => elem.addEventListener("click", navLinkClick));
}
// togglerClick function
function togglerClick() {
navToggler.classList.toggle("toggler-open");
navMenu.classList.toggle("open");
}
// navLinkClick function
function navLinkClick() {
if (navMenu.classList.contains("open")) {
navToggler.click();
}
}
/* Nav Bar */
.sticky {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
background: linear-gradient(30deg, #000000, #69b962);
position: fixed;
z-index: 99;
top: 0;
}
.sticky a {
color: white;
}
/*Styling Buttons*/
.login-button {
background-color: transparent;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: #131418;
background-color: #063b0a;
transition: all ease-in-out 350ms;
}
.join-button {
color: #131418;
background-color: #1b878f;
font-size: 1rem;
cursor: pointer;
}
.join-button:hover {
color: #f2f5f7;
background-color: transparent;
}
/* default css start */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
/* navbar regular css start */
.navbar-area {
background: linear-gradient(30deg, #000000, #69b962);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* nav-toggler css start */
.nav-toggler {
border: 3px solid #fff;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: 0.3s;
position: relative;
z-index: 99;
}
.nav-toggler span:before {
content: "";
transform: translateY(-9px);
}
.nav-toggler span:after {
content: "";
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* mobile breakpoint start */
#media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(100vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
border-top: 1px solid #444;
background-color: rgba(0, 0, 0, 0.75);
max-height: 0;
overflow: hidden;
transition: 0.3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
.site-navbar ul li a {
padding: 25px;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
}
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar" id="navbar">
<!-- site logo -->
<a href="index.html">
<img src="images/org_logo.png" alt="logo" width="50" height="44" />
</a>
<!-- site menu/nav -->
<ul>
<li>Home</li>
<li>Race Information</li>
<li>FAQ</li>
<li>Contact Us</li>
<li class="login-button ">My Account</li>
<li class="join-button">Register</li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>
I'm trying to make an animated menu, I would like to do it with CSS, but if not possible also javascript or Jquery.
.nav {
text-align: right;
height: 100%;
width: 17%;
position: absolute;
box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu {
margin: 0;
width: 100%;
height: 95%;
text-align: left;
overflow: auto;
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu a {
font-family: Georgia, "Times New Roman", serif;
text-shadow: 2px 2px 5px black;
line-height: 26px;
padding: 5px;
border-left: 4px solid;
margin: 0 0 0 0;
margin-top: 5%;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .1s;
transition: all .1s;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
-webkit-box-align: center;
align-items: center;
color: white;
}
/**** */
a:hover {
border-left: 5px solid #b93632;
color: #b93632;
}
span:hover {
color: yellow;
}
/**** */
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media screen and (max-width:800px),
screen and (max-height: 500px) {
.nav {
text-align: right;
height: 70px;
width: 100%;
line-height: 70px;
position: relative;
z-index: 1;
}
.menu {
text-align: center;
width: 100%;
display: none;
overflow: auto;
}
#toggle:checked+.menu {
display: block;
height: 400px;
}
}
<div class="nav">
<label for="toggle"><i class="fas fa-users"></i></label>
<input type="checkbox" id="toggle" />
<div class="menu" id="users">
<center><span>Utenti online: </span><span id="n_utenti"> 0</span></center>
<input type="text" id="cerca_utenti" onkeyup="Cerca()" placeholder="Cerca un utente">
<ul id="utenti_lista">
</ul>
</div>
</div>
I just can't get it to become animated, this is how it works, but it doesn't have ANIMATIONS, it has no transitions, how to do it?
I changed now, because CSS was not well understood. there is both the media quieres and the regular menu.
You can refer to the mdn documentation on css animation at https://developer.mozilla.org/en-US/docs/Web/CSS/transition.
In your case you cannot apply animation to display property, however you can add a animation to opacity, which practically looks like a fade-in/out animation.
This is the fiddle https://jsfiddle.net/e90dL586/ I've updated with opacity for you.
#toggle + .menu {
text-align: center;
width: 100%;
opacity: 0;
overflow: auto;
}
#toggle:checked + .menu {
opacity: 1;
transition: opacity 1s;
height:400px;
}
For more effects, refer the mdn docs.
I have come up with a simple navigation bar, and I have designed the most basic frame for its appearance. After reading up, I have managed to be able to create a dropdown when I hover on the main element (word).
How would I go about making the dropdown stay when I hover over the dropdown itself?
I tried using JS to hold the opacity at 1 when I hover over the dropdown, but it doesn't work because the dropdown itself is based off of opacity, and it will affect it regardless of whether I have initially hovered over the main element, since it's not display:none.
Also, another question is, in my "Servers" dropdown, I seem to be able to see only the "Server List", and not the other 2 in the <ul>, why is that so?
As for what I have come up with for what I managed to get working, this is my code:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className+="animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className+="animated fadeOut";
};
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#steamlogomainbox:hover
{
width: 12vw;
}
#gigalogo
{
width: 26vw;
height: 8vw;
margin: 0 0 0 2vw;
padding: 0;
}
#steamlogomainbox
{
width: 10.5vw;
height: 7vw;
float: right;
background-color: #0B0D16; /*000c21*/
-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
margin: 0.2vw -1vw 0 0;
padding: 0;
overflow: hidden;
}
#steamlogo
{
padding: 0.7vw 0 0 3vw;
height: 5.6vw;
}
#navbarbox
{
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar, #navbar ul
{
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span
{
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox
{
display: block;
opacity: 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
transform: skewX(15deg);
}
#serverdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
transform: skewX(15deg);
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
transform: skewX(15deg);
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
transform: skewX(15deg);
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
transform: skewX(15deg);
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
background-color: blue;
}
.animated
{
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
</head>
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li id="serverdropdownli">Server List</li>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<li>Events</li>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<li>Steam Group</li>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>