Brine Template: Immerse your customers in this website template’s beautiful scrolling banners.

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.

Header

Site Title Font Size

/* Desktop Title */
a.Header-branding {
    font-size: 10px !important;
}
/* Mobile Title */
a.Mobile-bar-branding {
    font-size: 50px !important;
}

Hide Logo (One Page)

First, you need to find Page ID.

Then, use

body#collection-5612e7fbe4b019df91935360 .Header-branding-logo {
    display: none;
}

Hide Logo (Entire Site)

img.Header-branding-logo {
    display: none;
}

Change Logo (Mobile)

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.Mobile-bar-branding-logo').attr('src','https://beaverhero.com/wp-content/uploads/2019/07/wexley-squarespace.jpg');
});
</script>

Replace with new logo url. Disable Ajax If the code doesn’t work.

Hide Cart Icon

.Header .Cart {
    display: none;
}

Logo (Left) – Navigation (Right)

[data-nc-container="top-right"] {
    display: none !important;
}
.Header-inner {
    flex-direction: row-reverse;
}
nav.Header-nav.Header-nav--primary {
    width: 100%;
    text-align: right;
}

Logo (Right) – Navigation (Left)

/* Remove Cart */
[data-nc-container="top-right"] {
    display: none !important;
}
/* Align Logo to Right */
.Header-inner {
    justify-content: space-between;
}

Logo (Top) – Navigation (Bottom)

.Header-inner {
    flex-direction: column-reverse;
}

Logo (Top) – Text (Under Logo) – Navigation (Under Tagline)

@media screen and (min-width:641px) {
/* Logo top Nav bottom */
.Header-inner {
    flex-direction: column-reverse;
}
/* Insert text below Logo */
.Header-branding:after {
    content: "Text Text";
    display: block;
    font-size: 20px;
    color: #ff0000;
    position: absolute;
    bottom: -10px;
    left: 20px;
}
.Header-branding {
    position: relative;
}
/* Increase padding between Nav and Logo */
.Header-nav {
    margin-top: 20px;
}
}

Logo (Bottom) – Navigation (Top)

.Header-inner {
    flex-direction: column;
}

Tagline on Mobile

@media screen and (max-width:640px) {
.site-branding h1 a:after {
    content: "Tagline";
    font-size: 20px;
}
.site-branding h1 a {
    display: flex;
    align-items: center;
}
}

Header Background Color

First, you need to find Page ID.

Then, use

/* Entire Site */
.Header {
    background: #ff0000;
}
/* One Page */
body#collection-5612e7fbe4b019df91935360 .Header {
    background: #ff0000;
}

Navigation Active Link Color

.Header-nav-item--active {
    color: #ff0000 !important;
}

Underline Navigation Active Link

.Header-nav-item--active { text-decoration: underline; }

Underline Navigation on Hover

.Header-nav-item:hover {
    text-decoration: underline;
}

or you can also use

.Header-nav-item:hover {
    border-bottom: 1px solid #ff0000;
}

Remove Search Icon

a.Mobile-bar-search {
    display: none;
}

Change Hamburger Icon to word “Menu”

.Mobile-bar-menu {
    visibility: hidden;
}
.Mobile-bar-menu:before {
    right: 0;
    visibility: visible;
    content: "Menu";
    display: block;
    margin-top: 10px;
    font-size: 15px;
}

Navigation Background Color (Mobile)

.Mobile-overlay-menu {
    background: #ff0000;
}
.Mobile-overlay {
    background: #ff0000 !important;
}
button.Mobile-overlay-close {
    background: #ff0000 !important;
}

Sticky Header

/* Sticky Header */
header.Header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
/* Fix Overlap content */
.Site-inner {
    padding-top: 100px;
}

Force Hamburger Menu on Desktop

@media screen and (min-width:641px) {
/* Show Mobile Header on Desktop */
[data-nc-base="mobile-bar"] {
    display: block;
}
/* Hide Desktop Header */
.Header {
    display: none !important;
}
/* Hide Mobile Logo */
.Mobile-bar-branding-logo {
    display: none;
}
}

Hide Header

Entire Site

.Header {
    display: none !important;
}

One Page

body#collection-56099b55e4b0ec7b8a89d273 .Header {
    display: none !important;
}

Blog Page

.view-list.collection-type-blog .Header {
    display: none !important;
}

All Blog Posts

.view-item.collection-type-blog .Header {
    display: none !important;
}

Footer

Remove Social Icons

.socialaccountlinks-v2-block {
    display: none;
}

Remove Footer Navigation

.Footer-nav {
    display: none;
}

Remove Footer

First, you need to find Page ID.

Then, use

/* Entire Site */
.Footer {
    display: none !important;
}
/* ONe Page */
body#item-561ece9de4b0b87b216c8863 .Footer {
    display: none !important;
}

Footer Background Color

First, you need to find Page ID.

Then, use

/* Entire Site */
.Footer {
    background: #ff0000;
}
/* One Page */
body#item-561ece9de4b0b87b216c8863 .Footer {
    background: #ff0000;
}

Footer Background Image

/* Entire Site */
footer.Footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
/* One Page */
body#item-561ece9de4b0b87b216c8863 footer.Footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

Blog

Blog Title Custom Font

/* Post title single post */
h1.BlogItem-title {
    font-family: font name !important;
}
/* Post title blog list page */
.BlogList-item-title {
    font-family: font name !important;
}

Remove Post Author

.Blog-meta-item--author {
    display: none !important;
}

Remove Published Date

.Blog-meta-item--date {
    display: none !important;
}

Increase Content Width

.view-item.collection-type-blog article .sqs-block.sqs-block-html {
    width: 70%;
}

Shop

Remove Add to Cart

.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

Remove Add to Cart (Specific Category)

Replace sour with your category name

.category-sour .sqs-add-to-cart-button-wrapper {
    display: none !important;
}

Remove Product Social Share Icons

.ProductItem-details-share {
    display: none !important;
}

Remove Quantity Box

.product-quantity-input {
    display: none !important;
}

Increase Product Detail Width

@media screen and (min-width:641px) {
.ProductItem-details {
    width: 70%;
}
.ProductItem-gallery {
    width: 30%;
}
}

Change “Add to Cart” Color

.sqs-add-to-cart-button {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    color: green !important;
    font-size: 40px !important;
    border-radius: 100px;
}

Change “Add to Cart” Text

.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "Add to basket";
    display: block;
    position: absolute;
    font-size: 10px;
    color: #ff0000;
}

Remove Breadcrumb

.ProductItem-nav-breadcrumb {
    display: none;
}

Change “Checkout” Button Color

.checkout-button {
    background: #f2f3f4 !important;
    border-color: #f2f3f4 !important;
    color: #000 !important;
    border-radius: 100px !important;
}