Samuel Cole Samuel Cole - 1 month ago 5
CSS Question

Transform scale on anchor elements not working in flexbox

I am using a flexbox as my navigation bar at the top of my page. I have only included the code for this part because the project is an entire site. All anchor tags on my site are styled the same, with the same

transform: scale(1.2)
characteristic on hover. This works everywhere except in my nav. Nothing seems to scale at all inside of my nav.

Additionally on this codepen, the flexbox doesn't seem to respect the
justify-content: space-around
, making the anchors appear more squished together than they do on my actual site.

enter image description here

Codepen: https://codepen.io/colesam/pen/YxLPVW



a {
color: #646c84;
font-weight: 500;
line-height: 1.7vw;
transition: all 0.2s;
}

a:hover {
color: #ffaf54;
cursor: pointer;
transform: scale(1.2);
text-decoration: none;
}

a:focus {
color: #646c84;
text-decoration: none;
}

a:focus:hover {
color: #ffaf54;
cursor: pointer;
}

.active-indicator {
background: #ffaf54;
border-radius: 25px;
height: 2px;
margin-top: -2px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all 0.2s;
width: 25px;
}

.active-indicator.active {
opacity: 1;
}

#menu {
background: whitesmoke;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 0 25vw;
position: fixed;
left: -1;
right: -1;
top: 0;
transition: all 0.2s;
z-index: 1;
}

#menu a {
font-size: 0.9vw;
}

#menu.inactive {
opacity: 0;
}

<div id="menu">
<div id="landing-nav">
<a>Home</a>
<div class="active-indicator active"></div>
</div>
<div id="about-nav">
<a>About</a>
<div class="active-indicator"></div>
</div>
<div id="portfolio-nav">
<a>Portfolio</a>
<div class="active-indicator"></div>
</div>
<div id="resume-nav">
<a>Resume</a>
<div class="active-indicator"></div>
</div>
<div id="contact-nav">
<a>Contact</a>
<div class="active-indicator"></div>
</div>
</div>




Answer Source

Your nav menu has no extra width, so the flex items are packed together.

Yes, you create the illusion of width with:

#menu { padding: 0 25vw; }

But that just adds padding to the left and right of the container. The items are still packed together, and justify-content has no space to work.

Instead of padding, try using something like width: 50vw.

The problem with the transform: scale() is that you have it applied to an inline-level element (a), which is not a transformable element.

Either add display: block to the anchor elements, or apply the transform to the parent div.

  • revised codepen (padding removed; width added; added display: block to a elements)

References: