Jump to content

Issue with custom color for Nav link (CSS)

Recommended Posts

I am using some simple custom CSS to control the color of the Nav links. It works perfectly in the editor -- but not with the site. I emptied the cache., etc... to no avail. The site Nav would not display the "Donate" text in white. 

Am I missing something? 

 

/* donate nav link */
#main-navigation li:nth-of-type(6)
a:link {
 	color: #FFFFFF !important;
 	text-decoration: none;
  	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
  	padding: 14px 20px !important;
  	border: 1px hidden white;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 1opx; 
    border-radius: 10px;
  	background-color: #FF7D41;
  	-webkit-transition-duration: 0.4s; /* Safari */
  	transition-duration: 0.4s;
  	display: inline-block;
}
#main-navigation li:nth-of-type(6)
a:hover, a:active {
  	background-color: rgba(255, 246, 249, 0.9);
 	color: #FF7D41 !important;
	text-decoration: none;
  	text-align: center;
	font-weight: bold;
  	display: inline-block;
}

 

 

 

 

 

 

Screen Shot 2019-10-08 at 10.05.39 AM.png

Screen Shot 2019-10-08 at 10.04.34 AM.png

Screen Shot 2019-10-08 at 10.04.20 AM.png

Link to comment
  • Replies 4
  • Views 562
  • Created
  • Last Reply

Here is the site: www.t1df.org. 

It displays very nicely in the site editor but not in a browser. The actual implementation of the custom CSS code fails to override the default color for the Donate link/nav element. 

I have also noticed that the Commerce page isn't always loading products properly (bizarre behavior when you select a product--i.e. product box moves on the page instead of opening the product window). That seems to be a broader backend issue. Finally, the checkout page does not use the design elements of the custom 404 page I created. This is very frustrating. One of the key reasons I selected the Five Template was its supposed integration with the Commerce module. This is not happening. The Commerce module still seems half-backed / beta. Back to the issue at and here: custom CSS implementation to override the color of a link. 

Any suggestion?

Link to comment

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.