Jump to content

Home Page Navigation issue

Recommended Posts

Posted

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

  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply
Posted

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.