add css to multiple data-sections

Hi is it possible to list out multiple data section ids for one  set of css 

This doesn't seem to work so im wondering if there is another method

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

13 hours ago, joshuaechevarriadop said:

Hi is it possible to list out multiple data section ids for one  set of css 

 

This doesn't seem to work so im wondering if there is another method

 

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

 

Your syntax is right. Howerver, what do you want to achieve? 

7 hours ago, Beyondspace said:

Your syntax is right. Howerver, what do you want to achieve? 

I wanted to apply a fixed position for it.  

when I used the above code it said there was a syntax error but I achieved what I needed by using this code below but I would like to figure out how to target multiple data sections at once

.page-section:nth-child(1) {
  position: fixed !important;
  z-index:9999;
}

Quote

when I used the above code it said there was a syntax error

The syntax error is because you have smart quotes in your code. CSS doesn't like smart quotes. Change them to straight quotes.

Otherwise the general syntax for having multiple selectors is correct.

selector,
selector,
selector,
selector

  {
  
    property : value;
    
    }

Hi I'm having the same issue. It works great with one, then when I start adding more data-section-ids the entire css doesn't work. In the last part of the css - if I use a comma after the section it will stop displaying full width. see screen shot. 

here is the code that works (see screenshot - titled withonly one): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

https://cornet-strawberry-368d.squarespace.com/citizenship
pw: mingus12

4 hours ago, dfesenmyer said:

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more):

Your selectors are incomplete. The CSS should look something like the following.

section[data-section-id="63d2d9da32af660a9bb515e7"] .content-wrapper,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .content-wrapper,
section[data-section-id="63d3f99f03e4472872bcea8a"] .content-wrapper,
section[data-section-id="63d3f9d3e68141630f2d2375"] .content-wrapper,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .content-wrapper,
section[data-section-id="63d3fa337d11266dadde5407"] .content-wrapper

  {
  
    padding-top : 25px !important;
    padding-bottom : 10px !important;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block

  {
  
    padding-bottom : 0 !important;
    text-align : center;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block p,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block p,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block p,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block p,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block p,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block p

  {
  
    display : inline-block !important;
    margin : 0 20px;
    
    }

If you're putting the code in Custom CSS you can use LESS syntax to reduce some of the repetitive text of standard CSS.

/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]

  {
  
    .content-wrapper {
    
      padding-top : 25px !important;
      padding-bottom : 10px !important;
    
      }
      
    .html-block {
    
      padding-bottom : 0 !important;
      text-align : center;
      
      p {
      
        display : inline-block !important;
        margin : 0 20px;
        
        }
        
      }
      
    }

I tried the password for the site but it didn't work.

Let us know how it goes.

sorry about that -

heres the password

pw: mingus12!

your suggestion worked!!! however the .content-wrapper should be sticky? 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"],
section[data-section-id="63d3fa5bfc703f102cee7de3"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fd73bcde2501d846e044"],
section[data-section-id="63d40527c392bd3a0c6b5f50"],
section[data-section-id="63d4058ff679e32fba95154e"],
section[data-section-id="63d4059af75935614200890e"],
section[data-section-id="63d405a7f8a2f972db0aafda"],
section[data-section-id="63d405b371b5476458f514e8"],
section[data-section-id="63d405c01c535a124ece65c9"],
section[data-section-id="63d405cce158984767bae86d"],
section[data-section-id="63d409e31257eb14e31d95d0"],
section[data-section-id="63d40a20a525244fb4f9cea6"],
section[data-section-id="63d40a339c8b554a7ee1b73f"],
section[data-section-id="63d40a471d7615439aa2f7de"],
section[data-section-id="63d40a5946744037285e531b"],
section[data-section-id="63d40a706109964256c2b7ca"],
section[data-section-id="63d40a83d7a88f51e3b61c16"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd73bcde2501d846e044"]
{
  .content-wrapper {
    padding-top : 15px !important;
    padding-bottom : 10px !important;
      }
      
    .html-block {
      padding-bottom : 0 !important;
      text-align : center;
      p {
        display : inline-block !important;
        margin : 0 20px;
        }
      }
}
 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

2 hours ago, dfesenmyer said:

however the .content-wrapper should be sticky?

I only tackled the code that had issues. The first ruleset in your post appeared to be correct.

Quote

and for some reason, now - my site logo disappeared?

Your code is not manipulating the header. Your page appeared to be OK after I disabled the Mega Menu and Secondary Navigation code. I'm an unable to help with someone else's custom code. Perhaps there is an error in your install process or it isn't configured properly?

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

thanks - you helped a ton.. The logo was another issue - trying to use a svg for the logo. (buggy and i couldn't get it to work). 

On 1/29/2023 at 5:48 AM, dfesenmyer said:

 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

 

thanks - you helped a ton.. The logo was another issue - trying to use a svg for the logo. (buggy and i couldn't get it to work). 

You mean replace this logo with a svg logo?