Jump to content

Navigation Items overlap when browser window resized

Recommended Posts

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. 
**/

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.