Buy me a coffee

Custom CSS for Bedford Template Squarespace

This template is in Bedford Family, so you can use many other CSS here.

Bedford Template: On one of our most popular website templates, the wide banner images and bold buttons create clear calls to action.

bedford-demo-squarespace-com--1689x1080-500w

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  with your site url. I’ll give you exact CSS.

4. To find Page ID, read here

Header

Changing navigation link font

/* Navigation */
div#mainNavWrapper a {
    font-size: 20px;
    color: red;
    font-family: Arial;
}

Change Nav font colour on specific pages

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 div#mainNavWrapper a {
    font-size: 20px;
    color: red;
    font-family: Arial;
}

Sticky Header

header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
}

Sticky Header (One Page)

body#collection-52d8053ce4b0e26973428261 header#header {
position: fixed !important;
left: 0;
right: 0;
top: 0;
z-index: 999;
}

Fixed header banner overlap on mobile

I made a fixed header.

Now I notice an overlap, on mobile view; the header is overlapping the banner text.

Does anyone know how to fix this.

main#page {
    margin-top: 80px;
}

Hamburger Icon Color

.mobile-nav-toggle * {
    background: red !important;
}

 

Other

Background Image (One Page)

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 #siteWrapper {
    background-image: url(https://www.hanoi-office.com/themes/frontend/img/img_about.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

Adjust the color of hyperlinks on one page

First, you need to find Page ID.

Then, use

body#collection-52d8053ce4b0e26973428261 a {
    color: #ff0000;
}

Remove date and time from Event Page

/* Date on Thumbnail */
.eventlist-datetag {
    display: none;
}
/* Date under title */
ul.eventlist-meta.event-meta {
   display: none;
}

Remove date and time from Event Detail Page

.eventitem-meta-date {
    display: none;
}

CSS for Banner Text

.banner-thumbnail-wrapper .desc-wrapper * {
    font-family: Arial !important;
    font-size: 20px !important;
}

Change Blog Banner Font

.collection-type-blog .sqs-featured-posts-gallery * {
    font-family: Arial !important;
}

Blog

Full justify on all body text

.view-item p {
    text-align: justify;
}

Remove published date

/* Date on Banner */
.published.post-date {
    display: none !important;
}
/* Date in blog listing page */
.published.entry-date {
    display: none;
}

Change the text in Comment Button “Post Comment”

.comment-btn {
    visibility: hidden;
}
.comment-btn:after {
    visibility: visible;
    content: "Submit a comment";
    color: #ff0000;
    font-weight: bold;
    background: #000;
    padding: 11px 29px;
    border-radius: 30px;
}

Change the color of the comment button

.comment-btn {
    background: #ff0000 !important;
    border-radius: 30px !important;
}

Featured Image: Squarespace.com

10 thoughts on “Custom CSS for Bedford Template Squarespace”

  1. This is all very helpful. Is there any code so that when the page is scrolled the sticky header will change in its background color or opacity?

    Reply
  2. Hello,
    I am using the Bedford template in Squarespace 7.0 and I am struggling to apply a border to dropdown menus. I would also like to change the background colour of dropdown menus and the font colour. Can you help?

    Reply
    • Use this CSS
      /* dropdown */
      .subnav {
      background-color: #f1f2f3 !important;
      border: 2px solid green;
      }
      .subnav * {
      color: red !important;
      }

      Reply
      • Thank you so much. Your code has worked and I have used it as a template to implement the other code that was not working for the drop down menus.

        Reply

Leave a Reply to Tuan Phan Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder