My website has a hamburger menu that causes an issue when I navigate to a specific page with a card element. Whenever I open the menu while on this page, the card element ends up overlapping with the menu inexplicably. Despite trying various solutions, I cannot seem to fix this problem in my CSS code...
This is my HTML for the react component:
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;
This is 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);
}