Prevent nav elements from "hopping" after :hover effect ends [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 months ago.
This post was edited and submitted for review 2 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
The links in my nav bar have a :hover effect where the font size is increased and a box shadow is added. Everything works fine except that, when the curser leaves the nav link, the other nav elements do a little hop (they move up a bit for just a moment, then back down to their original position). I'm not sure why this is happening or how to fix it. Any suggestions would be greatly appreciated. Thanks!
Edit: To reproduce this issue, follow the link to the site, use the dropdown field near the top left of the page to select the "Rounded and fun (Google style)" option, hover over the nav links in the top right then move your mouse off of the link. You should see the other links move up briefly, then move back down
I had the same problem on this site with the default stylesheet that had the links styled differently but had a somewhat similar :hover effect (increased font size and add a bottom border). I was able to fix that issue by decreasing the bottom padding a bit on :hover, but I tried that for this issue and it did not work.
I'm using plain HTML 5 and CSS 3.
I've attached the HTML, and all CSS related to the nav/header elements as well as a link to the webpage itself. My page has multiple stylesheets that the user can switch between using the dropdown field. My issue is related to the "rounded" style
This is my first "full" website that I've made (I'm currently going through a course on Codecademy) and it is also my portfolio site. So any suggestions on general improvements to the site/best practices are also welcome.
Site Link
https://jackf514.github.io/portfolio-site/
nav {
display: inline-block;
width: 50%;
padding-right: 5%;
flex-shrink: 2;
}
nav ul {
display: flex;
list-style: none;
float: right;
}
nav li {
padding: 0.5rem;
transition: font-size 0.1s;
}
nav a {
text-decoration: none;
color: hsla(210, 40%, 45%, 1);
font-size: 1.375rem;
transition: font-size 0.1s, color 0.5s, box-shadow 0.25s;
}
nav li:hover {
border-bottom: 2px solid hsla(210, 40%, 20%, 1);
padding-bottom: 6px;
font-size: 1.425rem;
}
nav li:active {
color: hsla(210, 40%, 35%, 1);
font-size: 1.4rem;
border-bottom-width: 1px;
}
nav a {
margin-left: 10px;
}
nav li {
padding: 8px 12px;
border: 1px solid hsla(210, 40%, 20%, 1) !important;
}
nav a,
nav li {
border-radius: 25px;
}
nav li:hover {
box-shadow: 0px 2px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
padding-bottom: 6px;
}
/*nav a:hover li {
padding: 6px 12px 5px 12px;
border-width: 0px;
}
nav a:hover {
box-shadow: 0px 3px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
}*/
<header>
<div id='title'>
<a href="#top">
<h1>Jack Ferguson</h1>
</a>
</div>
<nav>
<ul>
<a href="#about">
<li>About Me</li>
</a>
<a href="#projects">
<li>My Projects</li>
</a>
<a href="#contact">
<li>Contact Me</li>
</a>
</ul>
</nav>
</header>

Answer 1

There are multiple ways to fix this.
The reason for horizontal expand on hover is because of font size increase. When your font size changes, size of your ul container also changes. Hence , causing weird effect on hover.
I would recommend using scale for such transition instead of font size. It makes more sense and is easier to debug.
As of setting border , you can also use text-underline.
nav li:hover {
/* border-bottom: 2px solid hsla(210, 40%, 20%, 1); */
/* padding-bottom: 6px; */
/* font-size: 1.425rem; */
scale: 1.1;
text-decoration: underline;
text-underline-offset: 8px;
}

Answer 2

On your site, you could replace flex on your UL with grid, like the following:
display: grid;
grid-template-columns: 127px 144px 139px;
That being said, I wouldn't recommend it, because then you'd have to change the px values every time you update your menu. It is an option if you don't mind doing that though.
The reason why the shifting is occuring is because when the font size increases, it also increases the size of the menu. So the spacings need to readjust to accomodate. With flex, the sizes are done automatically based on the content so it needs to adjust. With the grid approach, you're specifying how big you want each menu item to be, so no shifting occurs.
IMO you should just do an underline and forgo the font increase altogether.
Also, for proper syntax make sure your list structure is as follows (as of now you have the a and li mixed up).
<ul>
<li>
<a></a>
</li>
</ul>

Answer 3

I've downloaded the CSS and HTML files directly from your website you provided above.
What's important to understand is that because of the flex display type, when you perform the transition the elements themselves change size to accommodate the transitions
A helpful tool I like to use to debug when I have size issues via margin, border, padding, or element sizing on my pages is to apply a random color to the specified elements background via background-color. These will let you see in real time how your hover is changing the actual size of the element you are looking at and also how all your elements interact with each other on the page. (this affect can also be seen to a lesser extent via the developer tools in your browser)
Using the background trick we can see that on Hover your ul element is changing its height and because of this causing all the other elements in it to move as well such that they are centered.
ul{
height:50px;
}
adding this to your style sheet allows the enough head room for the div when it grows to not resize it all and removes the vertical hoping around of your list items on hover. They will still move sideways due to the above mentioned resizing. This could be removed if space is added between the li
Understanding how each layer is built on top of each other is super important for how your site will look and understanding how things are affected. If your like me putting in the debug colors on your elements backgrounds can be a super useful tool to understanding how they are arranged on your page