Jump to content

Custom CSS for nav bar stopped working

Go to solution Solved by karan,

Recommended Posts

Posted (edited)

Hey everyone, 

I was updating some simple text on my website today and after a while, I noticed the custom CSS in my navigation bar just stopped working.  I had it set up to have the last 2 links of my nav bar to be coloured buttons. I didn't touch anything besides a text block, so I am very confused. If there is any code wizard here, help would be much appreciated, pretty please and thank you 🙃

URL: https://www.scandaleusephotography.com/

Here is the code I have:

div#mainNavWrapper nav>div:nth-last-child(2) a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:10px !important;
    }

div#mainNavWrapper nav>div:nth-last-child(2) a:hover{
    color: #fff !important;
    background-color:#000 !important;
    }

div#mainNavWrapper nav>div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #564f52!important;
    border-radius:10px !important;
    }

div#mainNavWrapper nav>div:last-child a:hover{
    color: #fff !important;
    background-color:#000 !important;
    }
 

 

Edited by Juisafish
Adding URL
Link to comment

Sure thing, let me know if this works:

 

div#mainNavWrapper nav>div:nth-last-child(2) a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #8d073a !important;
    border-radius:10px !important;
    }

div#mainNavWrapper nav>div:nth-last-child(2) a:hover{
    color: #fff !important;
    background-color:#000 !important;
    }

div#mainNavWrapper nav>div:last-child a{
    color: #fff !important;
    padding:10px 20px !important;
    border: 0px solid #000 !important;
    background-color: #564f52!important;
    border-radius:10px !important;
    }

div#mainNavWrapper nav>div:last-child a:hover{
    color: #fff !important;
    background-color:#000 !important;
    }

 

Link to comment
  • Solution


Hi @Juisafish ,

@tuanphan  wants to tell you that you have copy "custom-css" which you have added in custom panel of site which can be located in https://fanny-lelorrain.squarespace.com/config/pages/website-tools/custom-css page.

Also I can see there is typo error code in custom css. Look for code 

  content: “+“;

and replace it with 
 

content: "+"

 

 

With over 450+ websites built, I create uniquely tailored Squarespace sites designed to meet your specific needs and preferences. Let's bring your vision to life!

💻 Check out My Fiverr Gig: Click Here

-------------------------------------------

Please like and upvote if my comments were helpful to you. Cheers!
Did I help? 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.