joshuaechevarriadop Posted December 22, 2022 Share Posted December 22, 2022 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; } Link to comment
Beyondspace Posted December 23, 2022 Share Posted December 23, 2022 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
joshuaechevarriadop Posted December 23, 2022 Author Share Posted December 23, 2022 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; } Link to comment
creedon Posted December 23, 2022 Share Posted December 23, 2022 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; } Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
dfesenmyer Posted January 27 Share Posted January 27 (edited) 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 Edited January 27 by dfesenmyer Link to comment
creedon Posted January 27 Share Posted January 27 (edited) 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. Edited January 27 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
dfesenmyer Posted January 27 Share Posted January 27 (edited) sorry about that - heres the password pw: mingus12! Edited January 27 by dfesenmyer Link to comment
dfesenmyer Posted January 28 Share Posted January 28 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! Link to comment
creedon Posted January 28 Share Posted January 28 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? dfesenmyer 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
dfesenmyer Posted January 28 Share Posted January 28 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). Link to comment
tuanphan Posted February 2 Share Posted February 2 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment