Buy me a coffee

Free answer within 24 hours. Send your questions now ->

Custom CSS for Momentum Template Squarespace

Momentum Template: Create a dazzling portfolio with this website template’s full-screen imagery and slideshow interface.

Notes

  • Adding Custom CSS to Home > Design > Custom CSS
  • Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
  • With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
  • Send me a message if you have any questions/the code doesn’t work (free).
  • You can send a donation if this is helpful for you 😉

Header

Site Title Color

Entire Site

#logo h1 a {
    color: #ff0000;
}

One Page

<style>
#logo h1 a {
    color: #ff0000;
}
</style>

Remove Site Title/Logo

Entire Site

div#logo {
    display: none !important;
}

One Page

<style>
div#logo {
    display: none !important;
}
</style>

Move Logo to Bottom Right

#header .wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
#header .controls {
    left: 0;
}
#topNav {
    text-align: right;
    width: 100%;
}

Move Logo to Top Left

div#logo {
    position: fixed !important;
    top: 10px;
    left: 0;
    z-index: 999;
    right: 0;
    text-align: left;
}

Logo (Top) – Navigation (Bottom)

@media screen and (min-width:641px) {
#logo {
    display: block;
    padding-bottom: 10px;
}
}

Center Navigation

div#topNav {
    text-align: center;
    width: 70%;
}

Navigation Font Size

Entire Site

.main-nav * {
    font-size: 10px !important;
}

One Page

<style>
.main-nav * {
    font-size: 10px !important;
}
</style>

Mobile

nav#mobile-navigation a {
    font-size: 15px !important;
}

Desktop

.main-nav * {
    font-size: 10px !important;
}

Turn Navigation Last Item to Button

Entire Site

/* Button */
.main-nav li:last-child a {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid transparent
}
/* Hover Effect */
.main-nav li:last-child:hover a {
    background: #fff;
    color: #000;
    border-color: #000;
}

One Page

<style>
/* Button */
.main-nav li:last-child a {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid transparent
}
/* Hover Effect */
.main-nav li:last-child:hover a {
    background: #fff;
    color: #000;
    border-color: #000;
}
</style>

Force Mobile Navigation on Desktop

.ctrl-button.menu {
    display: inline-block;
}
div#topNav {
    display: none;
}

Fixed Navigation Always to Bottom

.opened #header {
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    border-top: 1px solid #dedede;
    border-bottom: none;
}

Change Height of Header

#headerWrapper header {
    padding-top: 50px;
    padding-bottom: 50px;
}

Header Background Image

Entire Site

header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

One Page

<style>
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
</style>

Header Background Color

Entire Site

header#header {
    background-color: #f7f8f9;
}

One Page

<style>
header#header {
    background-color: #f7f8f9;
}
</style>

Navigation Hover Color

.main-nav li a:hover {
    color: #ff0000;
}

Remove Underline on Navigation Links

#topNav .main-nav li a:hover {
    border-bottom: none;
}

Change Navigation Single Item Color

First Item

#topNav .main-nav li:nth-child(1) a {
    color: #ff0000;
}

Second Item

#topNav .main-nav li:nth-child(2) a {
    color: #f9f564;
}

Do Similar!

Align Navigation Links (Mobile)

nav#mobile-navigation li {
    text-align: center;
}

Change Navigation Background Color

Entire Site

/* Mobile */
nav#mobile-navigation {
    background: #f1f2f3;
}
/* Desktop */
div#topNav {
    background: #f2f3f3;
}

One Page

<style>
/* Mobile */
nav#mobile-navigation {
    background: #f1f2f3;
}
/* Desktop */
div#topNav {
    background: #f2f3f3;
}
</style>

Remove Navigation

Entire Site

div#topNav {
    visibility: hidden;
}

One Page

<style>
div#topNav {
    visibility: hidden;
}
</style>

Remove Hamburger Icon

Entire Site

.ctrl-button.menu {
    visibility: hidden;
}

One Page

<style>
.ctrl-button.menu {
    visibility: hidden;
}
</style>

Replace Hamburger Icon with word Menu

.ctrl-button.menu a.icon-hamburger:before {
    content: "Menu";
    font-family: proxima-nova;
    font-size: 15px;
    color: #dedede;
}

Replace Hamburger Icon with Custom Icon

.ctrl-button.menu a.icon-hamburger:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

Add word “Menu” beside Hamburger Icon

.ctrl-button.menu a.icon-hamburger:after {
    content: "Menu";
    font-size: 20px;
    color: #dedede;
    position: absolute;
    top: 15px;
    left: 40px;
}

Change Hamburger icon Color

.ctrl-button.menu a.icon-hamburger:before {
    color: #ff0000;
}

Remove Header

Entire Site

header#header {
    display: none;
}

One Page

<style>
header#header {
    display: none;
}
</style>

Move Header to Top

div#headerWrapper {
    top: 0;
    bottom: unset !important;
}
div#pageWrapper {
    margin-top: 100px;
}

Change Header Border Top

Entire Site

div#headerWrapper {
    border-top: 3px solid #ff0000 !important;
}

One Page

<style>
div#headerWrapper {
    border-top: 3px solid #ff0000 !important;
}
</style>

Header Border Bottom

.opened #header {
    border-bottom: 5px solid #ff0000;
}

Add Navigation Border Bottom

#mobile-navigation>ul li {
    border-bottom: 5px solid #ff0000;
}

Other

Align Center Page Title

All Pages

h1#page-title {
    text-align: center;
}

One Page

<style>
h1#page-title {
    text-align: center;
}
</style>

Page Background Color

All Pages

div#pageWrapper {
    background: #f1f2f3;
}
div#mainContent {
    background: #f1f2f3 !important;
}

One Page

<style>
div#pageWrapper {
    background: #f1f2f3;
}
div#mainContent {
    background: #f1f2f3 !important;
}
</style>

Page Background Image

All Pages

div#pageWrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

One Page

<style>
div#pageWrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
</style>

Slide Arrows Color

.arrow-wrapper .nav-button {
    color: #fff !important;
}

Disable Gallery Arrows

.nav-projects .arrow-wrapper {
    display: none;
}

Removing blank space at top of pages

All Pages

.collection-type-page div#mainContent {
    padding-top: 0 !important;
}
.collection-type-page h1#page-title {
    margin-top: 0;
}

One Page

<style>
.collection-type-page div#mainContent {
    padding-top: 0 !important;
}
.collection-type-page h1#page-title {
    margin-top: 0;
}
</style>

Hide Navigation Items

First Item

div#topNav .main-nav>ul li:nth-child(1) {
    display: none;
}

Second Item

div#topNav .main-nav>ul li:nth-child(2) {
    display: none;
}

Do Similar!

Blog

Align Center Post Title

Blog Page

.collection-type-blog.view-list h1.entry-title {
    text-align: center;
}

Post Detail Page

.collection-type-blog.view-item h1.entry-title {
    text-align: center;
}

Remove Post Date

Blog Page

.collection-type-blog.view-list span.date {
    display: none;
}

Post Detail Page

.collection-type-blog.view-item span.date {
    display: none;
}

Remove Post Share

Blog Page

.collection-type-blog.view-list .comments-social-like {
    display: none;
}

Post Detail Page

.collection-type-blog.view-item .comments-social-like {
    display: none;
}

Blog Width

All Blog Posts

.collection-type-blog.view-item div#mainContent {
    width: 1200px !important;
}

One Post

<style>
div#mainContent {
    width: 1200px !important;
}
</style>

Post Title Font Size

Blog Page

.collection-type-blog.view-list h1.entry-title a {
    color: #ff0000 !important;
    font-size: 20px;
    font-family: futura-pt;
}

One Post

<style>
.collection-type-blog.view-item h1.entry-title a {
    color: #ff0000 !important;
    font-size: 20px;
    font-family: futura-pt;
}
</style>

Featured Image: Squarespace.com

Share this post:

Leave a Comment

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