One simple method involves using jQuery to monitor the distance between the logo and the menu items. If the distance falls below a certain threshold (e.g. 100px), custom CSS is applied. This can be further customized to adjust padding, logo size, switch to a mobile menu, etc.
Check out the code snippet on jsfiddle
$(window).on('load resize', function() {
var menuOffset = $('.menu-items').offset().left
var logoWidth = $('.logo').width();
if (menuOffset - logoWidth <= 100) {
$('.menu-items').css('background-color', 'red');
} else if (menuOffset - logoWidth > 100) {
$('.menu-items').css('background-color', 'blue');
}
});
body {
font-family: helvetica;
font-weight: bold;
}
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav .menu-items {
display: flex;
}
.nav .menu-items .item {
padding: 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="logo">
logo
</div>
<div class="menu-items">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</div>
</div>
</nav>