Jump to content

Home Page Navigation issue

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.samuelprudden.com

I'm having an issue with the home page navigation on a Forte site and I'm wondering if anyone could help me troubleshoot it? 

Here's the site: samuelprudden.com

And here's the issue:

When you first land on the home page, and hover over the "WORK" menu item a black box appears with the submenu items. The submenu items font color is black and the link underline is white and I can't seem to force the submenu text to be white. To make things more frustrating, when you visit another page and then return to the home page, the submenu items do appear in white. I'm including all the code used on the site for reference below:

CUSTOM CSS:

/* Set header background colour and add 50px of space below */
#headerWrapper { 
  background: #f5f5f5; 
  padding: 50px 50px 0;
  margin-bottom: 50px;
}
/* Remove 50px of colour to allow for 50px of space */
#headerWrapper header {
    padding: 0 0 50px 0;
}
/* Remove padding from canvas otherwise header colour will not be edge-to-edge  */
body:not(.collection-type-index):not(.collection-type-gallery) #canvas {
    padding: 0px;
}
/* Add padding to page wrapper instead */
body:not(.collection-type-index):not(.collection-type-gallery).content-alignment-center .pageWrapper {
    padding: 0 50px;
}
/* Gallery pages header bottom no margin on smaller viewports */
@media only screen and (max-width: 768px) {
.collection-type-index #headerWrapper, .collection-type-gallery #headerWrapper {
margin-bottom: 0px;
}
}
.collection-type-index #headerWrapper, .collection-type-gallery #headerWrapper
 {
  padding: 0px !important; 
  margin-bottom: 0 !important;
}
/***BUTTON + FORM TEXT SIZE STANDARDIZATION***/
.sqs-block.form-block span { 
 font-size: 12px;     
}
.form-wrapper input[type="submit"] {
   font-size: 12px; }

/***FORM STYLING***/
.form-wrapper .field-list .field{
  font-family: futura-pt;	
  font-size: 13px;
  letter-spacing: .5px;	
}

.form-wrapper .title {
  font-family: futura-pt;	
  font-size: 12.5px;
  letter-spacing: 2.5px;	
}

.form-wrapper .field-list .field .field-element {    width: 100%;
    padding: 12px;
    margin: 6px 0 4px;
    background: #f5f5f5;
    font-size: 15px;
    font-family: futura-pt;
  	letter-spacing: 1.1px;	
	line-height: normal;
    box-sizing: border-box;
    border-left-width: 2px;
    border-left-color: #000	;
	border-radius: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 0px;
}

/***Contact Biz Manager Block Line***/
#block-yui_3_17_2_8_1507060636653_21560 {	border-left: 2px solid #000;
 	background-color: transparent;
    padding: 40px;
 }

/***About Page Line Styling***/
#block-97e5e21e44b779764c24
{	border-left: 2px solid #000;
	margin-left: 20px;
  	padding: 40px;
}

/***Heading 3 Style Change***/
h3 {
    letter-spacing: .05em;
}
/***THICK HORIZONTAL RULE***/
.sqs-block-horizontalrule hr 
{ 
  background-color: #000; 
  padding: 1.5px 0 0px 0; 
}
/***MOBILE ONLY NAV HEIGHT CHANGE***/
@media screen and (max-width: 768px){ #headerWrapper header 
 {
     padding: 0 0 40px 0, !important;
 }
}
/*** gallery plus sign removal  ***/
#fullscreenBrowser .slideshow.strip .slide .ctrl-button.resize a {
    display: none;
}

/***gallery black background***/
.collection-type-gallery section { background-color: #000;
}
#fullscreenBrowser .slideshow.strip .image-detail-wrapper
{
display: none;
}

/* Gallery pages black background on smaller viewports */
@media only screen and (max-width: 768px) 
{
.collection-type-gallery #fullscreenBrowser, html.mobile-view body.collection-type-gallery #mainContent {
background-color: #000;
}
}
/* Gallery pages black background at top of gallery on smaller viewports */
@media only screen and (max-width: 768px) 
{
.collection-type-gallery #fullscreenBrowser, html.mobile-view body.collection-type-gallery #mainContent {
margin-top: 20px !important;
}
}

AND THE ADVANCED CODE INJECTION ON THE HOME PAGE

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child li a {
  color: #fff !important;
  }
</style>

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child li a {
  color: #fff !important;
  }
.collection-title
{
display: none;
}
</style>

<style>
  .collection-detail-wrapper 
  {
  display: none;
  }
</style>

<style>
 .logo a, .logo-subtitle, #topNav .main-nav li a, #sqs-social a, .sqs-use--icon, .sqs-use--mask, #topNav .folder .folder-child-wrapper .folder-child:before, #mobile-navigation a, .ctrl-button a {
    color: #000 !important;
 }
 </style>

<style>
#sqs-social .sqs-use--icon {
    fill: #000 !important;
}
</style>

<style>
 body.collection-type-index .color-weight-dark  #topNav .folder .folder-child-wrapper ul.folder-child {
    background-color: #000 !important;
}
</style>

@paul2009 you helped with a couple of these code snippets back in 2017. Any chance you know what might be going on here?

Thanks for your consideration!
Sharon

Link to comment
  • Solution

The issue is the code on the homepage:

<style>
  .logo a, .logo-subtitle, #topNav .main-nav li a, #sqs-social a, 
  .sqs-use--icon, .sqs-use--mask, #topNav .folder .folder-child-wrapper .folder-child:before, 
  #mobile-navigation a, .ctrl-button a { 
    color: #000 !important; 
  } 
</style>

Try removing it and see how you get on.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.