champagnecoffee

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!

This worked for me, thank you! Is there a way to slow down the animation?

Thanks I found a different work around in the above video also

Site URL: http://urbangreen.co.uk/ Hello I would like the button to sit just above or below the social media icons, and all of that to sit just below the menu nav links (on the slide out mobile menu). However on most mobile devices the button is really low and cut off. Please can you help? Thank you Charlotte

Thank you so much!

I think I have sorted it https://www.lamaralighting.com/. Thank you.

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>

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?

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; }

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; } }

Hello On some browsers/ devices the email envelope icon is showing as a white emoji on the contact page https://www.lamaralighting.com/contact How can I fix this please? On mine it's fine.

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

Thank you

Yes it's: https://www.lamaralighting.com/ passcode: maria Thanks so much!

Hello I am hoping you can help me. I want all buttons on my website to have a transparent background with a thin outline box around the text. I want the outline and text on all buttons to be gold. I have achieved this but now I want to make some changes upon hover. I would like the text to go black AND the outline box to stay gold but also the background colour to fill gold on hover. I tried so many things such as: sqs-block-button-element:hover { border-color: #dcb05e !important; background-color: none !important; border: 2px solid #dcb05e !important; } and .primary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--primary:hover, .secondary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--secondary:hover, .tertiary-button-style-outline .sqs-block-form .sqs-editable-button.sqs-button-element--tertiary:hover { background: #000 !important; color: #000 !important; Nothing is working. I am now stuck with a fully gold button when you hover and gold text (which you can't read!) I know the above code is outdated since I already made some progress. Pease help! Thanks 🙂