Avoid navigation links stacking with centre logo

Hi there, 

I have a central logo placement with navigation links on the left side. Currently when I make my desktop window smaller, the links will stack over 2 or 3 lines.  I have already reduced the font size of the links but can't make it any smaller. 

To fix this I have used a code below, which partly works but it allows for the logo to go OVER the links which is not user friendly. 

nav.header-nav-list {
    flex-wrap: nowrap !important;
}
 

Can somebody please assist to ensure that when I make my window smaller, the links don't stack AND the logo doesn't cover the links. 

url:  https://roadrunner-maracas-sryk.squarespace.com/

password: burom

Some options, you can consider, then we will give the code

(1) Reduce Nav items size/space on these screen sizes

(2) Force Burger Menu appears on Left side on these screen sizes

Hi @tuanphan I'd like to explore the (2) option. Not sure how I set up the breakpoint to force mobile menu at a certain size only. Can you assist with that? Thank you 

3 hours ago, BUROM said:

Hi @tuanphan I'd like to explore the (2) option. Not sure how I set up the breakpoint to force mobile menu at a certain size only. Can you assist with that? Thank you 

 

Suppose you want burger menu appears on screen size 990px to 1100px, use this CSS code

@media screen and (min-width:990px) and (max-width:1100px) {
div.header-display-desktop div.header-burger {
    display: flex !important;
    position: absolute;
    left: 0;
}
div.header-display-desktop div.header-nav {
    visibility: hidden;
}
}

Hi @tuanphan the code doesn't work on my end, see picture reference. Nothing has changed. 

 

Does this screenshot in screen size 990 to 1100?

The code run from 990 to 1100px only

I have been able to solve the issue  with the below code: 

@media only screen and (min-width: 785px) and (max-width: 1100px) {
.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
  }}


Thanks for your help