Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
Related
This below is my code.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://raw.githack.com/alrusdi/jquery-plugin-query-object/9e5871fbb531c5e246aac2aaf056b237bc7cc0a6/jquery.query-object.js"></script>
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 10px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: small;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1 id="root"></h1>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
var pages = {
home: `HOME </br>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">home</button>
<div id="myDropdown" class="dropdown-content">
about
contact
</div>
</div>`,
about: `ABOUT </br>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">about</button>
<div id="myDropdown" class="dropdown-content">
home
contact
</div>
</div>`,
contact: `CONATCT </br>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">contact</button>
<div id="myDropdown" class="dropdown-content">
home
about
</div>
</div>`
};
var pl = $.query.get('page');
// var pl = new URLSearchParams(window.location.search).get("page");
if (pl == null) {
document.location.search = "?page=home"
}
if(pages[pl] != undefined){
// $('#root').html(pages[pl])
document.getElementById("root").innerHTML = pages[pl];
}else{
document.location.search = "?page=home"
}
</script>
</body>
</html>
And when I try to do a prototype pollution attack on the above code,
example like this,
https://exaple.com?page=hol&__proto__[hol]=<img src=x onerror=alert(1)></img>
it works perfectly and gives an alert popup.
but when I use the script tag it doesn't give me an alert popup,
example like this,
https://exaple.com?page=hol&__proto__[hol]=<script>alert(1)</script>
Can anybody help that what's going on?
why the <img> tag work but not <script> tag?
The version with <script>alert(1)</script> is harmless because HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
See mdn on innerHTML - Security considerations.
I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!
var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
showShoppingBtn.addEventListener('click', ()=>{
if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
showShopping.style.display = 'block';
}
else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
showMenu.style.display = 'none';
showShopping.style.display = 'block';
}
else {
showShopping.style.display = 'none';
}
});
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');
menuBtn.addEventListener('click', ()=>{
if(showMenu.style.display == 'none' && showShopping.style.display == 'none'){
showMenu.style.display = 'block';
} else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
showShopping.style.display = 'none';
showMenu.style.display = 'block';
} else {
showMenu.style.display = 'none';
}
});
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin:0;
padding: 0;
}
.top-content{
background: orange;
display: flex;
}
.shopping-menu{
width: 100%;
}
#shopping-cart{
font-size: 2.5em;
cursor: pointer;
padding-right: 0;
float: right;
margin-right: 1em;
}
.top ul{
margin-top: 3em;
list-style: none;
margin-right: 1em;
}
.top li{
padding-right: 1.2em;
margin-bottom: .5em;
text-align: right;
text-transform: uppercase;
}
.top-content-container{
width: 100%;
}
.top-dropdown{
display: none;
}
.site-logo img{
position: absolute;
width: 100vw;
display: none;
}
.bottom{
background-color:#0e1338;
color: white;
display: flex;
position: relative;
}
.menu{
padding-right: 1em;
width: 100%;
}
.menu-button{
float: right;
cursor: pointer;
padding-right: 1em;
}
.bottom-content-container{
margin-left: auto;
margin-right: 0;
text-align: right;
padding-right: 1em;
}
.bottom-content-container ul{
list-style: none;
}
.menu-bar{
width: 3em;
height: .5em;
background-color: white;
margin: .5em 0;
}
.bottom-dropdown{
display: none;
margin-top: 4em;
text-align: right;
}
.bottom-dropdown li{
margin: .7em 0;
text-transform: uppercase;
}
.top li a{
color: black;
text-decoration: none;
}
.bottom li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/header.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<section class="top">
<div class="top-content">
<nav class="shopping-menu">
<i class="fa fa-shopping-cart" id="shopping-cart"></i>
<div class="top-content-container">
<div class="top-dropdown" id="top-dropdown">
<ul>
<li>Cart</li>
<li>Checkout</li>
<li>My Purchases</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="bottom">
<div class="site-logo">
<img src="images/AutoNation-logo.png" alt="AutoNation Logo">
</div>
<nav class="menu">
<div class="menu-button" id="menu-button">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>
<div class="bottom-content-container">
<ul>
<div class="bottom-dropdown" id="bottom-dropdown">
<li>Services</li>
<li>Special Offers</li>
<li>Browse</li>
<li>Contact</li>
<li>Location</li>
<li>My Account</li>
</div>
</ul>
</nav>
</div>
</section>
<script src="scripts/header.js"></script>
</body>
</html>
It's because first time you entered the click function both style.display are not filled. so the condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
one quick solution to use your code is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
When you do element.style.someStyle, you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none.
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
Your HTML is invalid
You really should toggle a class. Add class hide to the menus and have .hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
I'm currently trying to create a navigation bar that sticks when you scroll past. I've gotten to the point where the bar will stick when I scroll past, but when I scroll back to the top the navbar is still sticking. I've been able to troubleshoot to realize that the navbar.offsetTop is being set to 0 when scrolling past, which causes the class "sticky" to never be removed. How can I fix this so that the navbar retains its original offset while being "stuck" to the top of the page?
HTML
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
CSS
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky + .content {
padding-top: 60px;
}
Javascript
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
}
else {
navbar.classList.remove("sticky");
}
}
window.addEventListener('scroll', stickyNav);
The problem is in the function definition of stickyNav.
What I'm seeing is stickyNav function is registered as a callback for the scroll event. But the variables navbar and navTop are inside the function which is assigning values to them every time you scroll. And navTop is getting assigned 0 every time. And the sticky class is never removed.
Try avoiding reassigning values. This worked for me.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Monaco;
background-color: white;
color: #f0dcca;
transition-duration: 0.4s;
height: 1000px;
}
.navbar {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbutton {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
/* padding: length|initial|inherit; */
padding: 10px 12px;
transition-duration: 0.4s;
}
.navbutton:hover {
background-color: #f0dcca;
color: black;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.content {
padding: 16px;
}
.sticky+.content {
padding-top: 60px;
}
</style>
<script>
function stickyNav() {
var navbar = document.getElementById("navbar");
var navTop = navbar.offsetTop;
window.addEventListener('scroll', function() {
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);
if (window.scrollY >= navTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
});
}
</script>
</head>
<body onload="stickyNav()">
<h1>dummy content</h1>
<h1>dummy content</h1>
<h1>dummy content</h1>
<div style="height: 40px">
<ul class="navbar" id="navbar">
<a class="navbutton left" href="about.html"><b>About</b></a>
<a class="navbutton left" href="Games.html"><b>Games</b></a>
<a class="navbutton left" href="#"><b>Btn 1</b></a>
<a class="navbutton left" href="#"><b>Btn 2</b></a>
<a class="navbutton left" href="#"><b>Btn 3</b></a>
<a class="navbutton left" href="#"><b>Btn 4</b></a>
<a class="navbutton" href="#" style="float: right"><b>Btn 5</b></a>
</ul>
</div>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.
I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)
it works well when i have all the script in HTML but will not work for me when I put the code externally.
ONLY WORKING ON THE ABOUT BUTTON CURRENTLY
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
*
{
margin: 0;
padding: 0;
}
header
{
background-image: url("../images/webBack.jpg");
background-color: powderblue;
height: 100vh;
background-size: cover;
background-position: center;
}
a{
color: black;
}
a:hover{
color:white;
transition-duration: 0.3s;
}
.row{
position: center;
max-width: 95%;
margin: auto;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
.main-nav{
float:right;
list-style:none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.button1 {
background-color: cornflowerblue;
opacity: 0.2;
font-size: 16px;
text-align: center;
padding: 14px 28px;
border: 2px solid black;
transition-duration: 0.2s;
cursor: pointer;
}
.button1:hover{
background-color: cornflowerblue;
color: white;
opacity: 1;
font-size: 18px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
margin-top: 150px;
margin-left: 25%;
padding: 20px;
border: 2px solid whitesmoke;
width: 50%;
height: 50%;
overflow: auto;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body{
font-family: monospace;
}
.Hero{
position: absolute;
margin: 500px;
margin-left: 25%;
margin-top: 0;
pointer-events:none;
}
h1{
color:white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
margin-top: 275px;
}
p{
color: black;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<script src="scripts/main.js"></script>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
</body>
</html>
in the snippet it works...
I am using IntelliJ
maybe something in the HTML?
I can't figure it out.
You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you decide to include Jquery in your HTML then you can do this.
$( document ).ready(function() {
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you want to try the jquery solution just put this in between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.