Jump to content

RhodesDesign

Member
  • Posts

    4
  • Joined

  • Last visited

RhodesDesign's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. Thanks so much for the response. I was quite fond of those underlines but perhaps I figure something else out. Given that the underline won't work would you be so kind to help me adjust my code to make the changes below? To navigation use: 'ArticulatCF-Medium' Change from black to this: #9c9288 On hover change to black #000000 And on the landed page it stay the colour black #000000 If you are able to weave in that these changes are made for not just desktop but also mobile and tablet that would be AMAZING! Thank you!
  2. Hi Guys, I am having trouble with the underline on my top navigation extending beyond the word. Can anyone help me with this? https://www.rhodesdesign.co.nz/ Some help would be greatly appreciated This is the CSS code: /* =================================== START SITE NAVIGATION - THIS MAKES THE MENU SPLIT ACROSS THE SCREEN =================================== */ .header-nav { width:100%; } .header-display-desktop .header-nav .header-nav-wrapper { position: absolute; width: 100%; top: 25px; } .header-display-desktop .header-nav .header-nav-wrapper .header-nav-list { width: 100%; display: flex; justify-content: space-between; } .header-display-desktop .header-nav .header-nav-wrapper .header-nav-item { flex-grow:1 } .header-display-desktop .header-nav .header-nav-wrapper .header-nav-item:nth-child(3) { flex-grow:80 } /* =================================== END SITE NAVIGATION - THIS MAKES THE MENU SPLIT ACROSS THE SCREEN =================================== */
  3. Hi There, I have been using a custom font 'ArticulatCF' on my website and it appears good on desktop but for some reason it's defaulting on mobile and tablet. I am new to CSS code so please be kind as I am running blind here. Is someone able to help me fix this for me? https://www.rhodesdesign.co.nz/ Some help would be greatly appreciated. The CSS I have is this: /* =================================== FONT STYLING =================================== */ :root { --font-demi-bold: 'ArticulatCF-DemiBold'; --font-normal: 'ArticulatCF-Normal'; --font-light: 'ArticulatCF-Light'; --font-thin: 'ArticulatCF-Thin'; } @font-face { font-family: var(--font-demi-bold); src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455a8a93021717621af53f4/1683335337449/ArticulatCF-DemiBold.otf"); } @font-face { font-family: var(--font-normal); src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab8006e98554f2b59b1f/1683336064636/ArticulatCF-Normal.otf"); } @font-face { font-family: var(--font-light); src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455aa05349d4f67433d4212/1683335685767/ArticulatCF-Thin.otf"); } @font-face { font-family: var(--font-thin); src: url("https://static1.squarespace.com/static/5fd72f6267ebfc29b09667ba/t/6455ab3f4e96fe4154e3fcf8/1683335999541/ArticulatCF-Light.otf") } /* =================================== END FONT STYLING =================================== */ /* =================================== set all the fonts =================================== */ h1, h2, h3, h4, h3.portfolio-title { font-family: var(--font-demi-bold) !important; } .sqsrte-large, p { font-family: var(--font-thin) !important; } .sqsrte-small { font-family: var(--font-thin) !important; } .header-nav-item a, .header-actions-action .btn, .sqs-block-button-element--small, .sqs-button-element--tertiary, .sqs-block-button-element--medium, .sqs-button-element--primary, .sqs-block-button-element--large, .sqs-button-element--secondary { font-family: var(--font-normal) !important; } /* =================================== End set all the fonts =================================== */
×
×
  • 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.