Navigation Items overlap when browser window resized

Hello,

    I've been searching the forums for an answer and came across several different areas where this was a problem but I have not found my solution yet.  When I shrink the browser window my navigation items overlap and do NOT turn into the burger until all items run out of room.  I would love to code the site so that when just one item runs out of room and goes to overlap another the burger appears.   This is my first forum post so let me know if I've done something wrong regarding proper forum etiquette.

current css (you'll recognize a lot of code from other forum posts as I've been searching for how to do things)

/* Navigation turns red when selected */
.header-nav-item--active a{background-image:none!important; color:red!important;}

/* Add a banner image at the top of every page*/
body div#siteWrapper:before{
   content: "";
    background-image: url(https://images.squarespace-cdn.com/content/652ecf553e374b08a06176a0/0a029a9c-c0b5-4cec-83de-4ef386359428/Ronyoung_Banner_short.jpg?content-type=image%2Fjpeg);
 
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 420px;

}

.header-announcement-bar-wrapper  {
  padding-top:5px !important;
  padding-bottom:5px !important;

}

/* keeps nav bar at top when scrolling */
.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.show-on-scroll-wrapper.show {
    display: none;
}

/* Add sticky header */
header#header {
        position: -webkit-sticky !important;
    position: sticky !important;
}

/* MOBILE banner smaller image to fit*/
@media only screen and(max-width: 640px){
body div#siteWrapper:before{
   content: "";
    background-image: url(https://images.squarespace-cdn.com/content/652ecf553e374b08a06176a0/76b68eec-b9b1-41f1-9aa5-55137bee7fb1/Ronyoung_Banner_mobile.jpg?content-type=image%2Fjpeg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    
    width: 100%;
    height: 127px;
  
}
  
  
  
/* Add sticky header */
header#header {
    position: sticky !important;
    }

.header-announcement-bar-wrapper  {
  padding-top:5px !important;
  padding-bottom:5px !important;
  }
}

/* Overlap section 2 and 3 on main page text and photo gallery */
@media only screen and (min-width: 641px) {
  #collection-652fc6125a3818191fc251e9 {
    #page .page-section:nth-of-type(2) { /*second second on the left*/
      width: 50%;
      min-height: 80vh;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(3) { /*third section on the right*/
      width: 50%;
      min-height: 80vh;
      align-items: center;
    }
    #page .page-section:nth-of-type(4) { /* forth section full width again */
      clear: both;
    }
  }
}

/**
 * Version 3.0
 * Accordion Plugins for Squarespace
 * Copyright Will Myers

* I removed this code here because I purchased it from Will Myers and didn't want to share his work

*this allowed me to easily create an accordion with various media within each. 
**/

Hi,

This is possible, however you need to share url, then we can know how many items you have in main navigation to give exact code

https://swordfish-seahorse-wnre.squarespace.com/

I'm new here and I've seen people share passwords etc.  I looked for some guidance on here as to how to share my site with support safely but didn't find anything.  Just let me know what I should do.  Thank you 

On 10/23/2023 at 6:45 PM, PhilRoc said:

https://swordfish-seahorse-wnre.squarespace.com/

I'm new here and I've seen people share passwords etc.  I looked for some guidance on here as to how to share my site with support safely but didn't find anything.  Just let me know what I should do.  Thank you 

 

Your site is public so it has no access password

Add this code to Website Tools (under Not Linked) > Custom CSS

/* I see line 1 - line 2 nav items overlap together, so this code will prevent this */
.header-nav-item.header-nav-item--collection {
    margin-bottom: 20px;
}

Which screen sizes do you see problem? I tried checking some screen sizes but all look fine

That did the trick.  I was focused on the wrong thing apparently.  It was the lines that were not spaced properly and your code fixed that by allowing the nav items to stack in rows rather then appearing on top of one another.    

Thank you so much