Develop Reference

Hide div content according to its width

Well, I'm trying to make a responsive menu... I already have the web menu structure, now I'm working on the mobile menu. Said menu must occupy the entire screen, when I close it what I do is reduce its width to 0 with a transition. The problem is that only the div is reduced, its content is still there... in this case only the button, obviously it will have more content later, but to begin with I want that button to disappear every time it is closed.
//Variables
let openMenu = document.getElementById('open_menu');
let contentMenu = document.getElementById('content_menu');
let iconsTopBar = document.querySelectorAll('.icon-top-bar');
let topBarWeb = document.getElementById('top_bar_web');
let topBarMobile = document.getElementById('top_bar_mobile');
let closeMenuMobile = document.getElementById('close_menu_mobile');
let mobileMenu = document.getElementById('mobile_menu');
//Functions
openMenu.addEventListener('click',function(e) {
contentMenu.classList.toggle('close-menu');
});
window.addEventListener("resize", function(){
iconsTopBar.forEach(icon => {
if( window.innerWidth <= 1000){
if(icon.classList.contains('fad')){
icon.classList.remove('fad');
icon.classList.add('fas');
}
}else{
if(icon.classList.contains('fas')){
icon.classList.remove('fas');
icon.classList.add('fad');
}
}
});
if( window.innerWidth <= 768){
contentMenu.classList.add('close-menu');
}else{
contentMenu.classList.remove('close-menu');
}
showMenu();
});
window.onload = showMenu();
function showMenu(){
if( window.innerWidth <= 600){
topBarWeb.style.display = "none";
topBarMobile.style.display = "flex";
contentMenu.style.display = "none";
// this.alert('asdfas');
}else{
topBarWeb.style.display = "flex";
contentMenu.style.display = "flex";
topBarMobile.style.display = "none";
}
}
closeMenuMobile.addEventListener('click',function(e){
mobileMenu.style.width = "0vw";
mobileMenu.style.transition = ".5s";
// alert('sdfsd');
});
#import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
--bg-color: rgba(78, 78, 78, 0.1);
--white:rgb(255, 255, 255);
--blue: rgb(67, 140, 248);
--gray: rgba(0, 0, 0, 0.6);
--red: rgba(212, 34, 34, 0.797);
--orange: rgb(255, 147, 74);
--purple:rgb(222, 83, 155);
--yellow:rgb(255, 238, 88);
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 3px;
}
* {
padding: 0;
margin: 0;
}
body {
background: var(--bg-color);
display: flex;
}
.content-menu {
display: inline-flex;
background: var(--white);
width: 280px;
height: 100vh;
transition: 0.6s;
}
.content-body {
width: 100%;
height: 100vh;
}
.content-body .content-top-bar {
display: block;
padding: 10px;
background: var(--white);
top: 0;
width: 100%;
background-image: url('../img/cardinal/top-bar.png');
background-position: center;
background-size: 50%;
background-repeat: no-repeat;
}
.content-body .content-top-bar .top-bar {
display: flex;
}
.content-body .content-top-bar .top-bar #open_menu {
display: inline-flex;
font-size: 25px;
cursor: pointer;
padding: 2px;
color: var(--blue);
width: auto;
}
.content-body .content-top-bar .top-bar .content-search-input {
border: 1.5px solid var(--blue);
margin-left: 20px;
border-radius: 5px;
background: var(--white);
width: 35%;
position: relative;
}
.content-body .content-top-bar .top-bar .content-search-input .search {
padding: 2px 0 2px 10px;
border: none;
background: var(--white);
color: var(--gray);
width: 80%;
outline: none;
border-radius: 5px 0 0 5px;
}
.content-body .content-top-bar .top-bar .content-search-input button{
border: none;
background: var(--white);
padding: 2px 5px;
border-radius: 0 5px 5px 0;
color: var(--gray);
position: absolute;
right: 0px;
}
.content-body .content-top-bar .top-bar .icons{
display: flex;
align-items: center;
position: absolute;
right:20px;
color: rgba(48, 132, 222, 0.934);
}
.content-body .content-top-bar .top-bar .icons i{
padding: 5px 10px 5px 10px;
font-size: 20px;
cursor: pointer;
position: relative;
}
/*EFECTO DE PULSO*/
.circle {
width: 7px;
height: 7px;
background: var(--red);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
.circle::before, .circle::after {
content:"";
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
width: 3px;
height: 3px;
border: 10px solid var(--orange);
border-radius:100%;
animation: latido linear 3s infinite;
}
.circle::after {
animation-delay: -1.5s;
}
#keyframes latido {
0% { width:7px; height:7px; border:3px solid var(--orange); }
100% { width:20px; height:20px; border:5px solid transparent; }
}
#button-0 { top: 5px; left: 30px; }
#button-1 { top: 5px; left: 25px; }
/*END EFECTO PULSO*/
.content-body .content-top-bar .top-bar .icons a{
text-decoration: none;
color: rgba(48, 132, 222, 0.856);
}
.content-body .content-top-bar .top-bar .icons img{
margin-right: 7px;
font-size: 20px;
border-radius: 100%;
border: 2px solid var(--blue);
}
#prueba {
width: 225px;
}
.close-menu {
width: 50px;
transition: 0.6s;
}
#top_bar_mobile{
display: none;
}
.mobile-menu{
width:100vw;
height: 100vh;
background: red;
position: fixed;
z-index: 10000;
}
.mobile-menu .i{
position: relative;
}
.body {
width: 100%;
}
.card {
margin: 10px;
height: 600px;
}
<!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">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>Administrador</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="{{ URL::asset('css/cardinal.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/fontawesome.css') }}">
</head>
<body>
<div class="mobile-menu" id="mobile_menu">
<button class="far fa-times" id="close_menu_mobile">cerrar</button>
</div>
<div class="content-menu" id="content_menu">
<div class="nav-bar">
</div>
</div>
<div class="content-body">
<div class="content-top-bar">
<div class="top-bar" id="top_bar_web">
<i class="fad fa-bars" id="open_menu"></i>
<div class="content-search-input">
<input type="text" class="search" id="search" placeholder="Search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="icons">
<i class="fad fa-envelope icon-top-bar" id="message_icon"><div class="circle button" id="button-0"></div></i>
<i class="fad fa-bell icon-top-bar" id="notification_icon" ><div class="circle button" id="button-1"></div></i>
<i class="fad fa-cog icon-top-bar" id="config_icon"></i>
<a href="/login"><img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
<span>Aldahir Ruiz Valdez</span></a>
</div>
</div>
<div class="top-bar-mobile top-bar" id="top_bar_mobile">
<i class="fad fa-bars" id="open_menu"></i>
<div class="icons " >
<img src="{{URL::asset('img/cardinal/login/brain.webp')}}"width="35px" height="35px"; alt="">
</div>
</div>
</div>
<div class="body">
<div class="card">
<div class="card-header">Headers</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<script src="{{ URL::asset('js/cardinal.js') }}"></script>
</body>
</html>

With your current implementation, you can add overflow: hidden; property to your .mobile-menu CSS rule.

Change header and content based off the tab selected

I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB

How do I make the navbar stay within the parent div (hero image) regardless of screen size?

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;
}

Header is not in the correct position

Excuse me for my stupidity. I'm trying to merge two different files but they're messed up and I'm sweating while thinking about the solution. Really appreciate someone taking the time to review my case T^T
Drive of header video if you want.
Oh, the system forced me to add more details to the post but I think with this dense code, it must be very detailed....
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
header {
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 200px;
transition: 0.5s ease;
}
header .brand {
color: #fff;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
}
header .navigation {
position: relative;
}
header .navigation .navigation-items a {
position: relative;
color: #fff;
font-size: 1em;
font-weight: 500;
text-decoration: none;
margin-left: 30px;
transition: 0.3s ease;
}
header .navigation .navigation-items a:before {
content: '';
position: absolute;
background: #fff;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before {
width: 100%;
}
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
background: #2696E9;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
background: rgba(3, 94, 251, 0.144);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
color: #fff;
width: 70%;
margin-top: 50px;
display: none;
}
.home .content.active {
display: block;
}
.home .content h1 {
font-size: 4em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content h1 span {
font-size: 1.2em;
font-weight: 600;
}
.home .content p {
margin-bottom: 65px;
}
/* .home .content a{
background: #fff;
padding: 15px 35px;
color: #1680AC;
font-size: 1.1em;
font-weight: 500;
text-decoration: none;
border-radius: 2px;
} */
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.home video {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-navigation {
z-index: 888;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(80px);
margin-bottom: 12px;
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn.active {
background: #2696E9;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.video-slide {
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.video-slide.active {
clip-path: circle(150% at 0 50%);
transition: 2s ease;
transition-property: clip-path;
}
#media (max-width: 1040px) {
header {
padding: 12px 20px;
}
section {
padding: 100px 20px;
}
.home .media-icons {
right: 15px;
}
header .navigation {
display: none;
}
header .navigation.active {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(1, 1, 1, 0.5);
}
header .navigation .navigation-items a {
color: #222;
font-size: 1.2em;
margin: 20px;
}
header .navigation .navigation-items a:before {
background: #222;
height: 5px;
}
header .navigation.active .navigation-items {
background: #fff;
width: 600px;
max-width: 600px;
margin: 20px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}
.menu-btn {
background: url(menu.png)no-repeat;
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s ease;
}
.menu-btn.active {
z-index: 999;
background: url(close.png)no-repeat;
background-size: 25px;
background-position: center;
transition: 0.3s ease;
}
}
#media (max-width: 560px) {
.home .content h1 {
font-size: 3em;
line-height: 60px;
}
}
body .bod {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c2864;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px;
}
.card {
position: relative;
width: 320px;
height: 450px;
margin: 30px;
background: #287bff;
border-radius: 20px;
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;
box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25), 0 45px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}
.card::before {
content: '';
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
transform: rotate(35deg);
pointer-events: none;
filter: blur(5px);
}
.card:nth-child(1) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(2) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(3) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.icon {
position: relative;
width: 140px;
height: 120px;
background: #3c2864;
;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
z-index: 1000;
display: flex;
justify-content: center;
}
.icon::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-right-radius: 50px;
box-shadow: 15px -15px 0 15px #3c2864;
}
.icon::after {
content: '';
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-left-radius: 50px;
box-shadow: -15px -15px 0 15px #3c2864;
}
.icon ion-icon {
color: #fff;
position: relative;
font-size: 6em;
z-index: 10000;
--ionicon-stroke-width: 10px;
}
.cont {
position: absolute;
width: 100%;
padding: 30px;
padding-top: 140px;
text-align: center;
}
.cont h2 {
font-size: 1.75em;
color: #fff;
margin-bottom: 10px;
}
.cont p {
color: #fff;
line-height: 1.5em;
}
.cont a {
color: #000000;
;
line-height: 1.5em;
}
footer {
background-color: #000000;
background-position: center;
color: #fff;
line-height: 1.5em;
text-align: center;
}
<!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>KHXH&NV</title>
<link rel="stylesheet" href="nthuuyen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body class="bod">
<div class="container">
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Phạm Thanh Loan</h2>
<p>Điểm học tập: 9.1 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br>
<!-- Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br> -->
Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br>
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Đỗ Thanh Tây</h2>
<p>Điểm học tập: 9 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Nguyễn Ngọc Phương Uyên</h2>
<p>Điểm học tập: 8.6 <br> Điểm rèn luyện: 81 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
<body class="bod">
<header>
ĐOÀN HỘI SINH VIÊN
<div class="menu-btn"></div>
<div class="navigation">
<div class="navigation-items">
Trang chủ
Giới thiệu
Hướng dẫn
Thông báo
Liên hệ
</div>
</div>
</header>
<section class="home">
<video class="video-slide active" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="hea.mp4" autoplay muted loop></video>
<div class="content active">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="media-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
<div class="slider-navigation">
<div class="nav-btn active"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
</div>
</section>
<script type="text/javascript">
//Javacript for responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
//Javacript for video slider navigation
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
const contents = document.querySelectorAll(".content");
var sliderNav = function(manual) {
btns.forEach((btn) => {
btn.classList.remove("active");
});
slides.forEach((slide) => {
slide.classList.remove("active");
});
contents.forEach((content) => {
content.classList.remove("active");
});
btns[manual].classList.add("active");
slides[manual].classList.add("active");
contents[manual].classList.add("active");
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
sliderNav(i);
});
});
</script>
</body>
<footer>
<p>
Group 3 <br> Phone: 0374040XXX <br> Class:xyz
</p>
</footer>
</html>

Two buttons, only one works

Only one out of my two “Order Now” buttons seems to work. Can’t find out the issue. The link and the :hover function works for the first button but for the second one none of them works. The first button is showcasebutton and the second one is showcasebutton2. They use the same code in CSS but it still isn’t working.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.nametext {
position: absolute;
top: 20px;
width: 100%;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
z-index: 2;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div class="nametext">
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">

I added a container class and deleted the nametext class.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 20px;
}
nav {
position: absolute;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container{
position: relative;
width: 100%;
align-content: center;
padding-bottom:20px;
height: auto;
background: #2421fe;
display: block;
z-index:1;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div>
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">