Develop Reference

CSS3 Slight indentation when hovering over a nav item

When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>

This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/

Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.

How Do I Make Transparent Navbar Have Background Color After Scroll?

I want to give my navbar the effect of being transparent initially, but upon scrolling is given a black background color. I understand that Javascript is best suited for the job, but I have tried window.addEventListener and have remained unsuccessful. Any tips at all are greatly appreciated.
<script>
window.addEventListener( 'scroll', function () {
let nav = document.querySelector('nav');
nav.classList.toggle('scrolling-active');
});
</script>
#header {
height: 100vh;
}
#header nav {
display: flex;
background-color: transparent;
justify-content: space-between;
position: fixed;
width: 100vw;
}
#header nav .name {
display: flex;
width: fit-content;
color: white;
padding-left: 30px;
align-items: center;
font-size: 30px;
}
#header nav .name span {
color: rgb(182, 18, 18);
}
#header nav ul {
display: flex;
list-style: none;
width: fit-content;
}
#header nav ul li {
padding: 30px;
}
#header nav ul li a {
text-decoration: none;
font-size: 25px;
color: white;
font-family: "Yanone Kaffeesatz", sans-serif;
}
.scrolling-active {
background-color: black;
}
<header id="header">
<section class="hero">
<nav class="nav">
<div class="name"><h1><span>D</span>ave <span>A</span>nthony</h1></div>
<ul>
<li>Home</li>
<li>About</li>
<li>Recent Posts</li>
</ul>
</nav>

this comes down to CSS specificity. You have this in your css:
#header nav {
display: flex;
background-color: transparent;
justify-content: space-between;
position: fixed;
width: 100vw;
}
ids are more specific than classes and have higher importance so it will use this background color, which is transparent. One way to solve it is by adding an !important clause to your added class:
.scrolling-active {
background-color: black !important;
}
However, this isn't the best approach since it doesn't really need it if you just simply rework your ID usage (but it will work).

Can't make reappear hidden divs in a navbar once a button is pressed with help of media queries

I'm trying to reproduce this responsive Navbar offered by W3 schools.
So far everything works except that I don't get the other divs (which function as navigation option) to reappear as a vertical list.
I tried changing to background color of the first div (which should always appear no matter what) upon button press and it does work, meaning that the onClick of the navigation div does work. What I don't get is why won't the other divs show up?
Here is the relevant HTML code
<div id=navbar class="respNavBar">
<div id="first">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class=navigation href="javascript:void(0);" onclick="showRespBar()">
<a><b>...</b></a>
</div>
CSS CODE
.greetingsText {
font-family: Raleway;
font-size: 50px;
}
.greetings {
box-shadow: 3px 6px #232323;
margin-right: 67%;
min-width: 165px;
}
#navbar {
height: 55px;
background-color: #393939;
box-shadow: 3px 6px #232323;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center; /* this makes shit center align vertically*/
min-width: 375px;
}
#navbar div:hover {
background-color: #a4a4a4;
}
.navigation {
display: none;
}
#navbar div {
height: 100%;
}
a {
margin-top: 10px;
display: block;
font-family: Raleway;
font-size: 30px;
text-align: center; /*this makes shit center horizaontally*/
}
.container {
margin-left: 12%;
margin-top: 2%;
margin-right: 12%;
}
#media screen and (max-width: 750px) {
#navbar {
display: block;
}
#navbar div:not(#first):not(.navigation) {display: none;}
#first {
float: left;
display: block;
}
.navigation {
display: block;
float: right;
}
}
#media screen and (max-width: 750px){
.extra {
float: none;
display: block;
text-align: left;
}
}
JS CODE
function showRespBar() {
var className = document.getElementById("navbar").className;
if (className === "respNavBar") {
document.getElementById("navbar").className += "additional";
} else {
document.getElementById("navbar").className = "respNavBar";
}
alert(className);
}

One possible issue i found in your JS code, inside if condition,
document.getElementById("navbar").className += "additional"; should be document.getElementById("navbar").className += " additional";
You are missing a space, due to which respNavBaradditional class gets applied to navbar instead of respNavBar addition.

creating menu header on a particular background color causing alignment to go wrong

I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?

So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.

Parallax image shows at top of page on load

For some reason I am having this weird CSS issue but I have no idea on how to fix it.
I'm using the Materialize CSS framework.
When the page loads, the parallax element appears on top of the page, strangely. It disappears when the user scrolls. Here's a picture of what I mean:
http://i.stack.imgur.com/ExRPq.png
Any ideas? Here's the code:
.main-container {
height: 88vh;
width: 100%;
padding: 0;
margin: 0;
display: -webkit-flex;
-webkit-flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 200;
font-family: Lato;
}
.main-container h1 {
margin-bottom: -5px;
margin-top: -15px;
}
.main-container h5 {
margin-bottom: 20px;
font-family: Roboto;
font-weight: 200;
}
#search-box {
height: 50px;
width: 500px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
resize: none;
}
#media screen and (max-width: 799px) {
.parallax-dsp {display: none}
}
And here's the HTML:
<nav class=" yellow darken-4" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
<ul id="nav-mobile" class="right side-nav">
<li><b>Sign in</b> or <b>register »</b></li>
</ul><i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
<h1>welcome to <logo></logo></h1>
<h5>Mxious is a social music discovery engine.</h5>
<input id="search-box" placeholder="type an artist, song, or album name to begin">
Thanks in advance!

From your picture, I assume you want the parralax image to be right below the nav right?… which I think is fixed. Well, just do a margin-top: to the main-container, and it will put it right below the nav.
Another way could be adding a new div class="top-fill" above main-container and make it the height of nav.
Edit: Looks like I haven't answered all your question, but I haven't worked with that framework, neither too much with parralax, so I don't know how to fix the dissapearing issue.