champagnecoffee
Circle Member-
Posts
27 -
Joined
-
Last visited
champagnecoffee's Achievements
-
Also, is there a way to make the underline only span the width of the nav item title? In the dropdown the line animation spans the width of the entire dropdown box which doesn't look great. Thanks!
- 4 replies
-
- css
- custom-css
-
(and 1 more)
Tagged with:
-
This worked for me, thank you! Is there a way to slow down the animation?
- 4 replies
-
- css
- custom-css
-
(and 1 more)
Tagged with:
-
champagnecoffee reacted to a post in a topic: Mobile header menu button displaying too low on mobile
-
tuanphan reacted to a post in a topic: Envelope Contact Social Icon showing as an Emoji ✉️
-
Envelope Contact Social Icon showing as an Emoji ✉️
champagnecoffee replied to champagnecoffee's topic in Customize with code
Thank you so much! -
mobile How to style mobile header menu
champagnecoffee replied to champagnecoffee's topic in Customize with code
I think I have sorted it https://www.lamaralighting.com/. Thank you. -
Envelope Contact Social Icon showing as an Emoji ✉️
champagnecoffee replied to champagnecoffee's topic in Customize with code
I made the envelope the gold colour I like on the FA website. Here is the HTML code it generated: <i class="fa-solid fa-envelope" style="color: #dcb05d;"></i> But what do I do with this and how do I tell the site to replace my icon with this? And here for the phone: <i class="fa-solid fa-phone" style="color: #dcb05d;"></i> -
champagnecoffee reacted to a post in a topic: Envelope Contact Social Icon showing as an Emoji ✉️
-
Envelope Contact Social Icon showing as an Emoji ✉️
champagnecoffee replied to champagnecoffee's topic in Customize with code
Hello @tuanphan thank you so much, if you can please provide me with the code that would be great! What do I need to do? -
mobile How to style mobile header menu
champagnecoffee replied to champagnecoffee's topic in Customize with code
Less important than the above, but I also have a really nice animation effect on my desktop menu nav items but it is not copying across to mobile menu, is there a way to have it on there too? .header-nav-item > a:after, .header-nav-folder-item > a:after { content:''; width: 0px; height: 0.5px; background: #dcb05e; display: block; transition: width .5s ease; } .header-nav-item > a, .header-nav-folder-item:hover { background: none !important; -
Hello Please tell me how I can make the mobile menu text and social media icons white. Here is the CSS I have // footer mobile text CC // #block-a5c4358a96066af3d09a p3 { font-size: 8px !important; } .header-nav-item > a:after, .header-nav-folder-item > a:after { content:''; width: 0px; height: 0.5px; background: #dcb05e; display: block; transition: width .5s ease; } .header-nav-item > a, .header-nav-folder-item:hover { background: none !important; } .header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after { width: 100%; } .header-nav-folder-item:hover > a { color: #fff !important; } .header-nav-folder-item > a { display: inline-block; } header#header.shrink { background: #545454 !important; } html { scroll-behavior: smooth; } .anchor-link { scroll-margin: 100px; } #block-7718413e187d966061db p, #block-7718413e187d966061db h1, #block-7718413e187d966061db h2, #block-7718413e187d966061db h3, #block-7718413e187d966061db h4 { font-family: "mrleopold-pro"; font-size: 60px; font-weight: 300; text-transform: none; display: block; transform: rotate(-5deg) !important; position: relative; letter-spacing: 0px; margin-bottom: -50px; color: #dcb05e; } #block-yui_3_17_2_1_1684181791417_30968 h1 { font-family: "montserrat-light"; letter-spacing: 10px; font-size: 50px; line-height: 60px; text-align: center; } .sqs-block-button-element:hover { background-color: transparent; color: #dcb05e; } #item-65086da8b6a6db1a27cd6be0 { header#header { background: #545454 !important; } } a { text-decoration: none !important; } // Pagination // #itemPagination { height: 1px; background: #545454; padding: 30px, } // Pagination // .item-pagination-link .item-pagination-icon svg { width: 15px; } // White Text Styling // #block-75d7d4835a4cbd44ea00 p3, #block-d84ae4ad787a7858d538 p3, #block-3d549eea25d5265b7172 p3, #block-2894b63ff303b1e7a6f0 p3, #block-7a27eed4c5cf422f7b67 p3 { text-color: #fff !important; color: #fff !important; } // Gold Text Styling // #block-28ba2f69218446a97fc9, #block-b8706f612aa02edbf309, #block-yui_3_17_2_1_1696502639044_37978{ color: #dcb05e; } // Post-Submit Message Styling // #block-yui_3_17_2_1_1690721030241_1530 { color: #fff; font-family: "mrleopold-pro"; font-size: 40px; font-weight: 300; text-transform: none; display: block; transform: rotate(-0deg) !important; position: relative; letter-spacing: 0px; margin-top: 30px; } // Subscribe Box Post-Submit Message // #block-yui_3_17_2_1_1690810303384_15454 { transform: rotate(0deg) !important; color: #fff; font-family: "mrleopold-pro"; font-size: 40px; font-weight: 300; text-transform: none; display: block; position: relative; letter-spacing: 0px; margin-top: 30px; } // Remove Hyphens // p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } // Taupe topo page sections borders // section[data-section-id="6511e33f7b0d7d0f9d402277"] { margin-top: -80px !important; margin-bottom: -50px !important; background: transparent !important; } section[data-section-id="651eeeb8c592507e05c150c0"] { margin-top: -10px !important; margin-bottom: -20px !important; background: transparent !important; color: black !important; } section[data-section-id="65115e6afeceba6ce11ec213"] { margin-top: -40px !important; margin-bottom: -80px !important; background: transparent !important; } section[data-section-id="651eebdc38b2be0913c2a2f3"] { color: none !important; background: none !important; margin-top: -40px !important; margin-bottom: -30px !important; background: transparent !important; } section[data-section-id="651eeadd79e9924edaab0b4c"] { margin-top: -50px !important; margin-bottom: -50px !important; background: transparent !important; color: black !important; } .page-section.background-width--inset .section-border { background-color: transparent !important; } // Full width accordian // .sqs-block-accordion .accordion-item__description { max-width: 100% !important; } /* Disable follow click */ .Header-nav-folder-title[href="/follow"] { pointer-events: none; } /* remove mobile footer on desktop only */ @media screen and (min-width:780px) { section[data-section-id="65267c1e8b76e01727e57b42"] { display: none !important; } } /* remove desktop footer on mobile only */ @media screen and (max-width:781px) { section[data-section-id="64c027fc981c71221f52cec5"] { display: none; } } .primary-button-style-outline .header-menu .header-menu-cta a.sqs-button-element--primary, .secondary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--secondary, .tertiary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--tertiary { color: #dcb05d; border-color: #dcb05d; } #block-yui_3_17_2_1_1690721030241_1530 { color: #dcb05d; } .primary-button-style-outline .header-menu .header-menu-cta a.sqs-button-element--primary:hover, .secondary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--secondary:hover, .tertiary-button-style-outline .site-wrapper .header-menu .header-menu-cta a.sqs-button-element--tertiary:hover { background: #dcb05d; } .header-menu-nav-item a { font-size: 18px; color: #fffff !important; } .header-actions-action--social { display: none !important; } .header-actions-action--social svg { fill: white !important; }
-
Changing the footer layout for the mobile version
champagnecoffee replied to ysong's topic in Customize with code
Hello, I have made 2x footer sections. This is the mobile section: section[data-section-id="65267c1e8b76e01727e57b42"] I have added this CSS code but it's removing the mobile footer on mobile too? I have /* remove mobile footer on desktop only */ @media screen and (min-width:780px) { section[data-section-id="65267c1e8b76e01727e57b42"] { display: none !important; } }- 3 replies
-
- custom-css
- squarespace-7.1
-
(and 1 more)
Tagged with:
-
accordion How to change accordion padding
champagnecoffee replied to champagnecoffee's topic in Customize with code
Thank you so much, it works and the client is very happy! -
Hello My client wants the accordion description text to go all the way along, currently it cuts off early (too much right padding). See the text lines that end in lighting, specific and you. To the right of this there is negative space. I'd be so grateful if you can help me reduce this. Thank you Charlotte