In my design, there is a sidebar navigation that collapses to make room for more content in a flex layout. When the user triggers the collapse action, the content area div .ca expands to fill the space, and the flex layout adjusts using media queries.
To see this in action, visit this link.
All moving elements have CSS transitions applied to them. However, I'm experiencing an issue where the .ca div jumps when the navigation is opened or closed. This appears to be related to the widths of the units in the flex layout – .songgrid-unit.
The unit has a fixed width value in pixels, but the media queries set a min-width value in percentages to override this and prevent large empty spaces between breakpoints:
Here is the HTML structure:
<div class="navbar open ease">
<div class="nav-toggle">
<div class="nt-wrap">
<div class="nt-bar ease" id="ntb-top"></div>
<div class="nt-bar ease" id="ntb-bot"></div>
</div>
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
</div>
</div>
Here is the CSS styling:
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
... (remaining CSS rules)
}
... (remaining CSS rules)
/* Media queries for adjusting column widths */
@media only screen and (max-width: 623px) {
... (CSS rules)
}
... (more media queries)
Finally, the jQuery implementation:
$(".nav-toggle").click(function(){
$(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
The issue with the transitions arises when media queries are introduced, specifically due to the min-width values. Removing the media queries resolves the transition problem. How can I address this issue and maintain the desired effect? Thank you.