I am trying to create a menu bar with elements which move upwards when hovered, but it only works when the parent container contains exactly one element (like in title-bar-right, unlike in title-bar-left). Other properties (the font family in this example) change as expected. I’ve tried removing the transition duration, but it does not fix the issue. Below is what I believe to be the minimum reproducible example.
#title-bar-left {
justify-content: left;
align-items: left;
float: left;
height: inherit;
}
#title-bar-right {
justify-content: right;
align-items: right;
float: right;
height: inherit;
}
.title-bar-element-container {
height: 100%;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
transition-duration: 0.3s;
}
.title-bar-element-container:hover {
margin-top: 10px;
height: 100%;
font-family: monospace;
transition-duration: 0.3s;
}<div id="title-bar">
<flex id="title-bar-left">
<flex class="title-bar-element-container">
<a class="title-bar-element bold-text" href="/main.html">main</a>
</flex>
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category1.html">Category 1</a>
</flex>
</flex>
<flex id="title-bar-right">
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category2.html">Category 2</a>
</flex>
</flex>
</div>>Solution :
You should try using the "top" property and make the position of the element relative.
In your css file change this:
.title-bar-element-container:hover {
position: relative;
top: 10px;
height: 100%;
font-family: monospace;
transition-duration: 0.3s;
}