Make Nav Menu Responsive - html

Question

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>

Answer 1

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.