I am trying to get frames to work where the navbar frame is on top and the frame below is the whole body, the navbar is in a different html file than the body frame. I have it the way I want it to LOOK. however, I cant click the links. Nothing I do is working. There are supposed to be 2 dropdowns, and some regular links.
Index file
<!Doctype HTML><html><head><!--Links to the other sheets--><link rel="stylesheet" type="text/css" href="style2.css" /><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" /><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>Thats What She Said LLC</title></head><body><header></header><div class="menuframe"><!--Menu--><iframe src="navbar.html" style="border: none; width: 100%;" sandbox="allow-same-origin allow-popups allow-scripts" name="NavBar"></iframe></div></header><!--Body Content--><div class="menutargetframe"> <iframe src="landing.html" name="mainBodyFrame" style="position:absolute; top:0px;" width="100%" height=100% title="Main body Frame"></iframe></div><script src="script.js"></script></body></html>navbar links
<!--template for html site--><!Doctype HTML><html><head><!--Links to the other sheets--><link rel="stylesheet" type="text/css" href="navbar.css" /><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" /><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>navbar</title></head><body><!--Menu--><header id="nav-menu" aria-label="navigation bar"><div class="container"><div class="nav-start"><a class="logo" href="/"><img src="./images/TWSS_logo2.png" width="245" height="245" alt="Inc Logo" /></a><nav class="menu"><ul class="menu-bar"><li><a class="nav-link" href="/" target="_parent">Home</a></li><li> <button class="nav-link dropdown-btn" data-dropdown="dropdown2" aria-haspopup="true" aria-expanded="false" aria-label="subsidiaries"> Subsidiaries<i class="bx bx-chevron-down" aria-hidden="true"></i></button><div id="dropdown2" class="dropdown"><ul role="menu"><li><span class="dropdown-link-title">Businesses</span></li><li role="menuitem"><a class="dropdown-link" href="http://www.erotictutors.com" target="_parent">Erotic Tutors</a></li><li role="menuitem"><a class="dropdown-link" href="http://www.vocationlocation.co" target="_parent">Vocation Location</a></li><li role="menuitem"><a class="dropdown-link" href="#" target="_parent">Welcoming Oppertunities</a></li><li role="menuitem"><a class="dropdown-link" href="http://www.OnlyBTCCoins.com" target="_parent">Only Btc Coins</a></li></ul></div><li> <button class="nav-link dropdown-btn" data-dropdown="dropdown1" aria-haspopup="true" aria-expanded="false" aria-label="Games"> Games<i class="bx bx-chevron-down" aria-hidden="true"></i></button><div id="dropdown1" class="dropdown"><ul role="menu"><li><span class="dropdown-link-title">PC</span></li><li role="menuitem"><a class="dropdown-link" href="https://patreon.com/ThatsWhatSheSaidLLC?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" target="_parent">The Career Coder</a></li></ul></div></li></li><li><a class="nav-link" href="/" target="_parent">Careers</a></li><li><a class="nav-link" href="/" target="_parent">News</a></li><li><a class="nav-link" href="/" target="_parent">Jokes</a></li><li><a class="nav-link" href="/" target="_parent">Contact Us</a></li></ul></nav></div><div class="nav-end"><div class="right-container"><a class="social" href="/"><img src='./images/social media/linkedin-blu_wh.png' alt="Linked In" /></a><a class="social" href="/"><img src='./images/social media/facebook-blu_wh.png' alt="Facebook" /></a><a class="social" href="/"><img src='./images/social media/WhatsApp_Logo_1-150x150.png' alt="" /></a><a class="social" href="/"><img src='./images/social media/yt_icon_red-310x219.png' alt="" /></a><a class="social" href="/"><img src='./images/social media/Twitter_Logo_Blue-150x150.png' alt="" /></a><a class="social" href="/"><img src='./images/social media/snap-ghost-yellow.png' alt="" /></a><a href="#profile"><img src="/assets/images/user.jpg" width="30" height="30" alt="user image" /></a></div></div></div></header><script src="script.js"></script><!--Body Content--></body></html>css for the navbar
/* index.html */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif;}:root { --dark-grey: #333333; --medium-grey: #636363; --light-grey: #eeeeee; --ash: #f4f4f4; --primary-color: #2b72fb; --white: white; --border: 1px solid var(--light-grey); --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}body { font-family: inherit; background-color: var(--white); color: var(--dark-grey); letter-spacing: -0.4px; /* background-image: url("./images/mainbg.jpg");*/ background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden;}ul { list-style: none;}a { text-decoration: none; color: inherit;}button { border: none; background-color: transparent; cursor: pointer; color: inherit;}.btn { display: block; background-color: var(--primary-color); color: var(--white); text-align: center; padding: 0.6rem 1.4rem; font-size: 1rem; font-weight: 500; border-radius: 5px;}.icon { padding: 0.5rem; background-color: var(--light-grey); border-radius: 10px;}.logo { margin-right: 1.5rem;}#nav-menu { border-bottom: var(--border);}.container { display: flex; align-items: center; justify-content: space-between; max-width: 1600px; margin: 0 auto; column-gap: 2rem; height: 90px; padding: 1.2rem 3rem;}.menu { position: relative; background: var(--white);}.menu-bar li:first-child .dropdown { flex-direction: initial; min-width: 480px;}.menu-bar li:first-child ul:nth-child(1) { border-right: var(--border);}.menu-bar li:nth-child(n + 2) ul:nth-child(1) { border-bottom: var(--border);}.menu-bar .dropdown-link-title { font-weight: 600;}.menu-bar .nav-link { font-size: 1rem; font-weight: 500; letter-spacing: -0.6px; padding: 0.3rem; min-width: 60px; margin: 0 0.6rem;}.menu-bar .nav-link:hover,.dropdown-link:hover { color: var(--primary-color);}.nav-start,.nav-end,.menu-bar,.right-container,.right-container .search { display: flex; align-items: center;}.dropdown { display: flex; flex-direction: column; min-width: 230px; background-color: var(--white); border-radius: 10px; position: absolute; top: 36px; z-index: 10; visibility: hidden; opacity: 0; transform: scale(0.97) translateX(-5px); transition: 0.1s ease-in-out; box-shadow: var(--shadow);}.dropdown.active { visibility: visible; opacity: 1; transform: scale(1) translateX(5px);}.dropdown ul { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem; font-size: 0.95rem;}.dropdown-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.15rem;}.dropdown-link { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-radius: 7px; transition: 0.1s ease-in-out;}.dropdown-link p { font-size: 0.8rem; color: var(--medium-grey);}.right-container { display: flex; align-items: center; column-gap: 1rem;}.right-container .social { position: relative;}.right-container img { border-radius: 50%; width:25px;}#hamburger { display: none; padding: 0.1rem; margin-left: 1rem; font-size: 1.9rem;}@media (max-width: 1100px) { #hamburger { display: block; } .container { padding: 1.2rem; } .menu { display: none; position: absolute; top: 87px; left: 0; min-height: 100vh; width: 100vw; } .menu-bar li:first-child ul:nth-child(1) { border-right: none; border-bottom: var(--border); } .dropdown { display: none; min-width: 100%; border: none !important; border-radius: 5px; position: static; top: 0; left: 0; visibility: visible; opacity: 1; transform: none; box-shadow: none; } .menu.show, .dropdown.active { display: block; } .dropdown ul { padding-left: 0.3rem; } .menu-bar { display: flex; flex-direction: column; align-items: stretch; row-gap: 1rem; padding: 1rem; } .menu-bar .nav-link { display: flex; justify-content: space-between; width: 100%; font-weight: 600; font-size: 1.2rem; margin: 0; } .menu-bar li:first-child .dropdown { min-width: 100%; } .menu-bar > li:not(:last-child) { padding-bottom: 0.5rem; border-bottom: var(--border); }}@media (max-width: 600px) { .right-container { display: none; }}javascript for navbar
// dropdown menusconst dropdownBtn = document.querySelectorAll(".dropdown-btn");const dropdown = document.querySelectorAll(".dropdown");const hamburgerBtn = document.getElementById("hamburger");const navMenu = document.querySelector(".menu");const links = document.querySelectorAll(".dropdown a");function setAriaExpandedFalse() { dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));}function closeDropdownMenu() { dropdown.forEach((drop) => { drop.classList.remove("active"); drop.addEventListener("click", (e) => e.stopPropagation()); });}function toggleHamburger() { navMenu.classList.toggle("show");}dropdownBtn.forEach((btn) => { btn.addEventListener("click", function (e) { const dropdownIndex = e.currentTarget.dataset.dropdown; const dropdownElement = document.getElementById(dropdownIndex); dropdownElement.classList.toggle("active"); dropdown.forEach((drop) => { if (drop.id !== btn.dataset["dropdown"]) { drop.classList.remove("active"); } }); e.stopPropagation(); btn.setAttribute("aria-expanded", btn.getAttribute("aria-expanded") === "false" ? "true" : "false" ); });});// close dropdown menu when the dropdown links are clickedlinks.forEach((link) => link.addEventListener("click", () => { closeDropdownMenu(); setAriaExpandedFalse(); toggleHamburger(); }));// close dropdown menu when you click on the document bodydocument.documentElement.addEventListener("click", () => { closeDropdownMenu(); setAriaExpandedFalse();});// close dropdown when the escape key is presseddocument.addEventListener("keydown", (e) => { if (e.key === "Escape") { closeDropdownMenu(); setAriaExpandedFalse(); }});hamburgerBtn.addEventListener("click", toggleHamburger);i am so lost at this point. I cant get anything to work right. oh and there is no hamburger, i took that out.
I tried every option i can find or think of, which isnt much btw.
Every step i take adds more problems that i cant fix,
all I want to do is have a navbar in one file framed into another, where all the links target that bodyframe.