When I mouseover the button, the hover effect is over-lapping the icon and label of the button. I tried to move the layer of the icon/label divs on top of the hover effect by putting the z-index: 999; and it doesn't work.
HTML
<div class="service-wrapper">
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn">
<div class="serv-name">TECHNICAL SUPPORT</div>
</div></a>
</div>
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn">
<div class="serv-name">CUSTOMER SERVICE</div>
</div></a>
</div>
</div>
CSS
.button {
height: 40px;
width: 230px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
position: relative;
}
a {
text-decoration: none;
}
.button::before,
.button::after {
background: rgba(255, 255, 255, 1.0);
content: '';
position: absolute;
}
.button::after {
height: 70px;
left: -22%;
top: 0;
transform: skew(50deg);
transition-duration: 0.3s;
transform-origin: top;
width: 0;
z-index: 0;
}
.button:hover:after {
height: 60px;
width: 325px;
}
.iconBtn{
max-height: 85%;
max-width: 85%;
}
img:hover: {
z-index: 999;
}
See JSFIDDLE
Firstly, you attached the z-index:999 to the img:hover meaning that you have to hover the image for it to apply. Also you added an extra : after img:hover so it was like img:hover:.
Furthermore, adding z-index:999 to the label does actually solve the problem. You see the result here:
.button {
height: 40px;
width: 230px;
margin: 10px;
padding: 5px;
padding-right: 15px;
padding-left: 15px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
position: relative;
}
a {
text-decoration: none;
}
.button::before,
.button::after {
background: rgba(255, 255, 255, 1.0);
content: '';
position: absolute;
}
.button::after {
height: 70px;
left: -22%;
top: 0;
transform: skew(50deg);
transition-duration: 0.3s;
transform-origin: top;
width: 0;
z-index: 0;
}
.button:hover:after {
height: 60px;
width: 325px;
}
.iconBtn{
max-height: 85%;
max-width: 85%;
z-index: 999;
}
.serv-name{
z-index:999;
}
<div class="service-wrapper">
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=42205&size=36" class="iconBtn">
<div class="serv-name">TECHNICAL SUPPORT</div>
</div></a>
</div>
<div class="services">
<a href="#"><div class="button">
<img src="https://png.icons8.com/?id=7495&size=36" class="iconBtn">
<div class="serv-name">CUSTOMER SERVICE</div>
Related
This is my goal:
Some circular buttons that have an hover state: on mouseover, a black container with some text (with different length) should appear growing from left to right.
I didn't know how to do that. My doubts are about how to set the two different width because it should be from 0 to auto but if it's 0, then mouseover can't work.
Here is my sample code:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
Here's a start. I think it's all pretty self-explanatory. The max-width on the text elements is arbitrary--set it to something that will fit all possible names.
I simplified the markup a bit. You could take it further by making the inner circles pseudo-elements if you like.
* {
box-sizing: border-box;
}
.container {
display: inline-block;
background-color: #ddd;
width: 62px;
padding-left: 10px;
}
.item {
display: inline-flex;
align-items: center;
border-radius: 32px;
padding: 8px;
margin: 16px 0;
cursor: pointer;
border: 1px solid black;
background: white;
font-family: Verdana, Arial, sans-serif;
transition: all .5s;
}
.circle {
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #CD4025;
}
.item:nth-child(2) .circle {
background-color: #0097A7;
}
.item:nth-child(3) .circle {
background-color: #FFAC40;
}
.text {
color: #fff;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.item:hover {
background: #000;
transition: all .5s;
}
.item:hover .text {
max-width: 200px;
margin: 0 16px;
transition: all 1s;
}
<div class="container">
<div class="item">
<div class="circle"></div>
<div class="text">Lilly Martin</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Philip McDaniel</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Tom Bombadil</div>
</div>
</div>
You can do this CSS transitions and altering the scale of the div while the circle item is hovered. Take a look what I did here:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px;
scale: 0;
transform-origin: left;
transition: all 200ms ease-in-out;
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
.item:hover .hovered-elem{
scale: 1;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>
Element 2 is an image for the youtube logo. Element 1 is a button with a visual hover effect with three bars stacked on top of each other.
I want the button on the left and the image right next to it.
I need them in the upper left corner.
Here is a screenshot so far https://postimg.cc/Mn2B8wCR
Here is the code I have so far
.element1 {
display: inline-block;
width: 500px;
}
.element2 {
display: inline-block;
width: 500px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger {
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger>div {
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first {
width: 55px;
top: 25px;
left: 20px;
}
.second {
width: 40px;
top: 45px;
left: 20px;
}
.third {
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
You can wrap it in a container and use display: flex;.
.nav-container{
display: flex;
width: 100%;
}
.element1{
display: inline-block;
width: 120px;
}
.wrapper{
padding-left: 10px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div{
width: 60px;
transition: width 0.3s ease;
}
.element2{
display: inline-block;
width: 500px;
}
<div class="nav-container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In HTML, wrap all of element 1 and 2 with a 'container' div:
<div class="container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In CSS, make div container flex and into a row.
.container {
display: flex;
flex-direction: row;
}
Change your positions of your hamburger and wrapper class:
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
Is this you want to do?
Edit:
Here I done below changes:
Removed all styles of the .wrapper which don't need there
Added vertical-align: middle for .element1 and .element2
Removed width from .element1 which don't need there
Added margin-left to .element2 for space
.element1{
display: inline-block;
vertical-align: middle
}
.element2{
margin-left: 30px;
display: inline-block;
vertical-align: middle
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
.logo {
width: 300px
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
you can use this
.container {
display:inline-block;
margin-right:auto }
/* the margin right auto is to force the elements to be on the left corner */ps it should be only the imge and the button inside this div(class='container')
I have searched all over stack overflow but I am unable to find any clue and I am struck here. I used flex container and child items in my code to some extent but I couldn't move beyond that. Thing is when we hover a child item, a new child item need to be created as shown in the expected result. Should we need to use pseudo element or any other flex properties to achieve this. Thanks much in advance.
My code:
https://jsfiddle.net/k2qr398u/1/
My result
https://imgur.com/kRHNHuu
Expected result:
https://imgur.com/2B6CkYF
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
/* position: relative; */
}
.col p {
font-size: 16px;
font-weight: bold;
}
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
<div class="col col-2">
<p class="my-name">Sri</p>
</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</body>
P.S: Sorry if this question sounds very silly or dumb, I am a beginner trying to learn web dev skillsets.
I have created something similar to your expected result. Please run the code snippet for the result.
UPDATE: To include the hover off transition.
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
position: relative;
}
.col p {
font-size: 16px;
font-weight: bold;
}
/*
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
*/
.col-1,
.col-2-1,
.col-2-2,
.col-3 {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
.wrapper {
position: relative;
}
.wrapper:hover .col-1 {
transition: 1s;
left: -200px;
}
.wrapper:hover .col-2-1 {
transition: 1s;
top: -170px;
}
.wrapper:hover .col-2-2 {
transition: 1s;
top: 170px;
}
.wrapper:hover .col-3 {
transition: 1s;
left: 200px;
}
<!--**HTML**-->
<body>
<div class="container">
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-2-1">
<p class="my-name">Sri</p>
</div>
<div class="col col-2-2">
<p class="my-name">Pratham</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</div>
</body>
The idea is:
Overlay some content over main content.
On hover reveal it :)
.card {
width: 150px;
height: 80px;
border: 1px solid #999;
background: #ccc;
border-radius: 8px;
position: relative;
margin: 20% auto;
}
.card:hover > .o-top {
top: -80px;
background: #f00;
}
.card:hover > .o-bottom {
bottom: -80px;
}
.o-top {
top: 0;
transition: top 1.5s, background 2s;
}
.o-bottom {
bottom: 0;
transition: bottom 1.5s, background 2s;
}
.card-overlay {
position: absolute;
height: 100%;
width: 100%;
background: #333;
pointer-events: none;
color: #fff;
}
<div class="card">
<div class="card-overlay o-top">TOP OVERLAY</div>
<div class="card-overlay o-bottom">BOTTOM OVERLAY</div>
<H3>INTERNAL CONTENT</H3>
</div>
<div align="center">
<div class="container2">
<img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px">
<div class="overlay">
<div class="text">Here you can discuss different topics and ask or answer questions.</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay2">
<div class="text">Bottom</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay3">
<div class="text">Bottom</div>
</div>
</div>
</div>
i want to make the images next to each other but i can't idk why or how tbh and this is the css i have tried everything it doesn't work
I want 3 images side by side with hover and caption, at the moment I have 3 images going from top to bottom, the hover is good but not side by side. How do I make the images appear side by side? Thanks.
.container2 {
position: relative;
width: 250px;
}
.image {
display: block;
width: 250px;
height: 300px;
height: auto;
margin: 17%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay {
height: 85%;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay2 {
height: 85%;
}
.overlay3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay3 {
height: 85%;
}
You would have to add float property to your container2 selector. Please check the css rule below.
.container2 {
float: left;
position: relative;
width: 250px;
}
.container {
width: 400px;
height: 400px;
padding: 0px;
display: grid;
grid-template-columns: auto auto auto;
}
.item {
width: 100px;
height: 200px;
margin: 2px;
}
<div class="container">
<div class="item" style="background-color:red">
</div>
<div class="item" style="background-color:blue">
</div>
<div class="item" style="background-color:yellow">
</div>
</div>
Why don't you grid-display property ?
This might help you
For these such scenarios there is a beautiful/clean/simple concept called flex which is helping by decreasing number of lines of code:
here is the example with column, color and hover effect, hope it helps you:
#MainDiv {
height: 200px;
width: 650px;
display: flex;
/* here is a concept */
flex-direction: row;
/* you can either change it to row/columns */
padding: 5px;
}
#firstDiv {
width: 200px;
margin: 5px;
background-color: red;
}
#secondDiv {
width: 200px;
margin: 5px;
background-color: blue;
}
#thirdDiv {
width: 200px;
margin: 5px;
background-color: green;
}
#firstDiv:hover {
background-color: blue;
color: white;
}
#secondDiv:hover {
background-color: green;
color: white;
}
#thirdDiv:hover {
background-color: red;
color: white;
}
<div id="MainDiv">
<div id="firstDiv">First Div</div>
<div id="secondDiv">Second Div</div>
<div id="thirdDiv">Third Div</div>
</div>
I'm trying to make my page's nav menu responsive. Currently, icons don't fit on the screen as the height is decreased. Ideally what I'm wanting is a responsive design where all of the elements scale with the page height (ie, icons and text shrinks to fit).
So far, I can only get the design to work with hard-coded values as below. This requires multiple breakpoints which I'm trying to avoid as getting everything to fit just right with hard coded values is proving too lengthy a process.
https://jsfiddle.net/froggomad/392qje0o/
.topnav {
position: fixed;
width: 100%;
width: 100vw;
background-color: transparent;
}
.topnav #myLinks {
display: block;
position: fixed;
top: 15%;
height: 85vh;
width: 400px;
margin-left: 80%;
margin-right: 5%;
background-color: transparent;
border-radius: 10px;
bottom: 5%;
}
.menu-link {
padding-top: 0.5em;
}
.menu-card {
display: block;
text-align: center;
opacity: 100%;
padding: 0;
margin: 0;
margin-bottom: 18%;
}
.menu-card:hover {
background-color: transparent;
opacity: 100%;
transition: all 0.8s;
}
/*Transforms .card-text when hovering on .menu-card*/
.menu-card:hover .card-text {
opacity: 100;
max-width: 66%;
/*this is the attribute being animated in .card-text*/
width: 38%;
/*sets actual width*/
background-color: rgba(148, 181, 201, 0.9);
border-width: 8px;
}
.menu-icon {
display: inline;
text-align: center;
margin-left: -265px;
margin-right: 0;
padding-left: 0;
padding-bottom: 0;
max-width: 20%;
vertical-align: middle;
background-color: rgba(148, 181, 201, 0.9);
border-radius: 90px;
padding: 8px;
}
.card-text {
max-width: 0%;
opacity: 0;
color: #5DCA31;
background-color: transparent;
text-shadow: 2px 2px black;
float: left;
vertical-align: middle;
margin: 0;
margin-right: 22%;
padding: 0.5em;
padding-right: 140px;
padding-left: 2%;
padding-top: 24px;
padding-bottom: 35px;
border-color: rgba(148, 181, 201, 0.9);
border-width: 0px;
border-style: solid;
border-radius: 90px;
transition: background-color 0.8s, border-width 0.8s, max-width 0.8s;
}
#home {
/*Text*/
font-size: 1.5em;
margin-top: 3%;
}
.home {
/*Icon*/
margin-top: 3%;
}
#strategy {
font-size: 1.25em;
}
#security {
font-size: 1.5em;
}
#pledge {
font-size: 1.5em;
}
<div class="topnav">
<div class="top-bar">
<a href="#" id="site-title">
Site Title
</a>
</div>
<!-- Navigation links (hidden by default) -->
<div id="myLinks" class="menu-link">
<div class="menu-card">
<a href="#">
<img class="menu-icon home" src="https://www.shareicon.net/data/128x128/2015/09/22/104866_home_512x512.png">
<p class="card-text" id="home">Home</p>
</a>
</div>
<div class="menu-card">
<a href="#">
<img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/21/104860_find_512x512.png">
<p class="card-text" id="strategy">Current Strategy</p>
</a>
</div>
<div class="menu-card">
<a href="#">
<img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/22/104877_locked_512x512.png">
<p class="card-text" id="security">Security</p>
</a>
</div>
<div class="menu-card">
<a href="#">
<img class="menu-icon" src="https://www.shareicon.net/data/128x128/2015/09/22/104870_users_512x512.png">
<p class="card-text" id="pledge">Pledge!</p>
</a>
</div>
<!--End Navigation links-->
</div>
</div>
Here's a working version using flexbox and position absolute.
https://jsfiddle.net/my6nwu0e/
.top-bar {
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
.topnav {
position: fixed;
width: 100vw;
}
.topnav #myLinks {
display: flex;
flex-direction: column;
position: fixed;
width: 300px;
top: 10%;
right: 0;
height: 85vh;
max-height: 85%;
border-radius: 10px;
}
.menu-link {
padding-top: 0.5em;
}
.menu-card {
display: flex;
justify-content: center;
flex: 1 1 25%;
}
.menu-card a {
position: relative;
width: 100%;
}
.menu-icon {
position: absolute;
z-index: 1;
right: 20%;
max-height: 65%;
border-radius: 50%;
background-color: rgba(148, 181, 201, 0.9);
transition: all 0.8s;
}
.card-text {
display: flex;
align-items: center;
width: 0;
top: 6%;
height: 100%;
max-height: 0;
text-align: left;
font-size: 100%;
opacity: 0;
color: #5DCA31;
background-color: transparent;
text-shadow: 2px 2px black;
margin: 0;
border-color: rgba(148, 181, 201, 0.9);
border-style: solid;
border-radius: 90px;
transition: all 0.8s;
}
.menu-card:hover {
background-color: transparent;
opacity: 1;
transition: all 0.8s;
}
.menu-card:hover .menu-icon {
right: 0;
}
.menu-card:hover .card-text {
opacity: 1;
padding-left: 10%;
max-height: 65%;
width: 100%;
border-width: 8px;
box-sizing: border-box;
background-color: rgba(148, 181, 201, 0.9);
}
#media screen and (max-height: 700px) {
.topnav #myLinks {
width: 200px;
}
}
You were using too many margin properties, and seemed like there were a lot of unnecessary/redundant styles, although maybe they depended on the other styles in the page that you did not post. You will have to change the the width of #myLinks using media query, but other than that I think this is a pretty responsive solution. Also consider using box-sizing: border-box as a global style.