We Keep Coding

Element goes above other element - CSS

I have a hamburger menu inside my website and if I go inside a specific which I have a card with some other elements inside. But if I open the menu while I'm inside the page with this card element the card goes above the menu for some reason. I tried almost everything but I can't get it right. I can't see where is my mistake with the CSS code...
My react component (html):
import TopNavBarMobileComponent from "../TopNavMobileComponent";
import github_icon from '../../assets/github_icon.png'
import instagram_icon from '../../assets/instagram_icon.png'
import my_picture from '../../assets/my_picture.jpg'
import '../../css-mobile/AboutMeStyle.css'
function AboutMeMobile() {
return (
<div>
<TopNavBarMobileComponent />
<div className="info-card-container">
<aside class="profile-card">
<div class="mask-shadow"></div>
<header>
<a href="https://github.com/georgesepetadelis/">
<img src={my_picture} />
</a>
<h1 className="name">GEORGE SEPETADELIS</h1>
<h2>Software engineer</h2>
</header>
<div class="profile-bio">
<p>16 y/o and I'm from Greece. I have experience with many programming languages and Frameworks for all mobile platforms like Flutter, React-Native and also native Android and iOS development with Java and Swift. Also I am currently working on Unreal engine and Unity for some big projects. </p>
</div>
<ul class="profile-social-links">
<li>
<a href="https://github.com/georgesepetadelis/">
<img src={github_icon} />
</a>
</li>
<li>
<a href="https://www.instagram.com/sepetadelhsss/">
<img src={instagram_icon} />
</a>
</li>
<li>
<a href="https://twitter.com/gsepetadelis">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg" />
</a>
</li>
</ul>
</aside>
</div>
</div>
)
}
export default AboutMeMobile;
My css file:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);
img {
max-width: 100%;
}
.name {
margin-top: 7%;
}
.info-card-container {
z-index: 1;
margin-top: 15%;
width: 100%;
position: absolute;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.profile-card {
position: relative;
width: 90%;
margin-top: 8%;
padding: 40px 30px 30px;
background: #fff;
border: 5px solid rgba(255,255,255,.7);
text-align: center;
border-radius: 8px;
transition: all 200ms ease;
}
.mask-shadow {
z-index: -1 !important;
width: 95%;
height: 12px;
background: #000;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
border-radius: 4px;
opacity: 0;
border-radius: 80px;
transition: all 400ms ease-in;
}
.mask-shadow {
opacity: 1;
box-shadow: 0px 30px 60px -5px rgba(55,55,71,0.3);
position: absolute;
}
.profile-card header {
display: block;
margin-bottom: 10px;
}
.profile-card header a {
width: 150px;
height: 150px;
display: block;
border-radius: 100%;
margin: -120px auto 0;
box-shadow: 0 0 0 5px #3300ff;
}
.profile-card header a img {
border-radius: 50%;
width: 150px;
height: 150px;
}
.profile-card header h1 {
font-size: 20px;
color: #444;
text-transform: uppercase;
margin-bottom: 5px;
}
.profile-card header h2 {
font-size: 14px;
color: #acacac;
text-transform: uppercase;
margin: 0;
}
.profile-bio {
font-size: 14px;
color:#a5a5a5;
line-height: 1.7;
font-style: italic;
margin-bottom: 30px;
}
.profile-social-links {
margin:0;
padding:0;
list-style: none;
}
.profile-social-links li {
display: inline-block;
margin: 0 10px;
}
.profile-social-links li a {
width: 55px;
height:55px;
display:block;
background:#f1f1f1;
border-radius:50%;
-webkit-transition: all 2.75s cubic-bezier(0,.83,.17,1);
-moz-transition: all 2.75s cubic-bezier(0,.83,.17,1);
-o-transition: all 2.75s cubic-bezier(0,.83,.17,1);
transition: all 2.75s cubic-bezier(0,.83,.17,1);
transform-style: preserve-3d;
}
.profile-social-links li a img {
width: 35px;
height: 35px;
margin: 10px auto 0;
}
.profile-social-links li a:hover {
background: #ddd;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}

CSS has a 3d object location - the obvious x and y, but there is also a z element. This Z element determines which elements display over others, and which go behind. To set the z element (or index), use the z-index property.

my sub navigation bar is visible when i hover over the navbar element itself but disappears when i hover over it

I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help

You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo

Unable to display content behind navbar when fixed position

I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top

try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}

One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}

CSS Menu Hover Underline Animation

I'm trying to create an underline animation when hovering on menu items (based on this CodePen). For some reason, all my menu items are underlined instead of just one when hovering. I only want the menu item that is hovered to be underlined, not everything.
Here is my code:
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
Please help!

Remove position:absolute from .pages a:after. Elements with absolute positioning are not in the normal document flow. In your snippet your 100% width will not be 100% of a but 100% of nearest relativly/absolutly positioned parent(body by defaul; ul in your case).
As an alternative, you may set position:relative to li, so that :after element will be underlying li.
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
position: relative
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
My explanation may be to complicated so you may look at snippet below. I tried to explain positioning.
.box {
width: 100px;
height: 100px;
}
#parent {
background: pink;
width: 200px;
height: 200px;
}
#child1 {
position: relative;
top: 10px;
left: 10px;
background: lightgreen;
}
#child2 {
position: absolute;
background: lightyellow;
}
<div id="parent" class='box'>
<!--parent-->
<!-- relative element stays relative to it's original position but can be shifted-->
<div id="child1" class='box'>position:relative with "top"and"left" of 10px</div>
<div id="child2" class='box'>position:absolute</div>
</div>
<!--
notice how yellow box is stays where it should be without "top"&"left" assigned, but it's owerlaping shifted green box
-->

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>

You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK