Jump to content

Custom CSS working on individual pages but not on pages under a folder

Recommended Posts

Hi - I am not a designer or a code person. I made a simple small website for myself but need help with the css issue described below:

I have some custom css to add a border to my buttons. it works on individual pages under "Main Navigation" but it does not take effect on pages under the "folder" (folder is under Main Navigation-I have 6 pages under my folder) or the pages under "Not Linked".  I tried to use the #collection-id but it did not work either or maybe I do not know how to use it. Here is the code I used:

//Button Text Color, border
.sqs-block-button-element {
  color:#545454!important;
  background-color:#fffefe!important;
  border: 2px solid #545454!important;
}

I thought custom CSS is global?

Not sure how to get it to work on all pages?

Thanks so much in advance!

NJ

Edited by NJoy
Link to comment
  • Replies 3
  • Views 474
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Code has to tarket the element, so a nav folder code would look something like this:

#topNav nav .folder-collection .subnav {
    background: #fff !important;box-shadow: 5px 5px 15px rgba(0,0,0,0.25)
}

I used the above code to put a drop shadow border around my folder dropdown box.  You should be able to change the box-shadow to the word border and adjust the rgba code to any color. Before you make any changes to it, try it in custom css. 

Here is the page where I use it with two folders on the Nav bar. 

https://myrandomviews.com/storyarchive

Edited by derricksrandomviews
Link to comment

Thanks but I do not want the dropdown menu itself to change, I want the buttons in pages that are under the dropdown to change. Right now, if I go to my home page, I see the buttons with a border (CSS is working). but when I go to one of the "pages" under my dropdown list, those pages have the original button format. There are multiple buttons on each page.

one more piece of info I just noticed: The buttons in "Headline" sections do not change with css.

image.png.e658f2a33d5db558e3b03a4043785b96.png

I hope I make sense.

Thanks,

NJ

Edited by NJoy
providing more info
Link to comment
  • NJoy changed the title to Custom CSS working on individual pages but not on pages under a folder

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.