Jump to content

champagnecoffee

Circle Member
  • Posts

    22
  • Joined

  • Last visited

Posts posted by champagnecoffee

  1. 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;

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

     

     

    Screenshot 2023-10-17 at 13.57.51.png

    Screenshot 2023-10-17 at 13.58.45.png

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

  4. 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

     

    Screenshot 2023-10-06 at 18.53.47.png

  5. 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 🙂

×
×
  • 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.