Jaunt Template: Emphasize your products with big images and clear spaces.

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

Hide Logo

.Header-branding {
    display: none;
}

Hide Logo (One Page)

First, you need to find Page ID.

Then, use

body#collection-58458bd71b631ba4660a1077 .Header-branding {
    display: none;
}

Hide Navigation

[data-nc-container="top-right"] {
    display: none !important;
}

Hide Navigation (One Page)

First, you need to find Page ID.

Then, use

body#collection-58458bd71b631ba4660a1077 [data-nc-container="top-right"] {
    display: none !important;
}

Hide Header (One Page)

First, you need to find Page ID.

Then, use

body#collection-58458bd71b631ba4660a1077 .Header {
    display: none !important;
}

Logo (Right) – Navigation (Left)

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

Logo (Left) – Hamburger Menu (Right)

.Mobile.loaded [data-nc-container="top-left"] {
    flex-direction: row-reverse;
}

Logo (Top) – Navigation (Bottom)

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

Logo (Top) – Navigation (Bottom) (Mobile)

[data-nc-container="top-left"] {
    flex-direction: column-reverse;
}
.Mobile.loaded [data-nc-container="top-right"] {
    display: none !important;
}

Turn Last Navigation Item to Button

.Header-nav-inner a:last-child {
    background: #ff0000;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 30px;
    font-size: 15px;
}

Underline Navigation Active Link

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

Change Nav Active Link Color

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

Change Dropdown Menu Color

span.Header-nav-folder {
    background: #ff0000 !important;
}

Change Hamburger Icon to word “Menu”

button.Mobile-bar-menu {
    visibility: hidden;
}
button.Mobile-bar-menu:after {
    visibility: visible;
    content: "Menu";
    font-size: 16px;
    color: #ff0000;
    font-weight: bold;
}

Hide Cart Icon (Mobile)

.Mobile.loaded .Cart {
    display: none;
}

Footer

Hide Footer (One Page)

First, you need to find Page ID.

Then, use

body#collection-5841a0f08419c25eac8057de .Footer {
    display: none !important;
}

Hide Footer (Entire Site)

.Footer {
    display: none !important;
}

Shop

Hide Add to Cart

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

Change “Add to Cart” Text

.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:after {
    visibility: visible;
    content: "Your Text";
    display: inherit;
    margin-top: -10px;
    font-size: 20px;
    color: #ff0000;
}

Change “Add to Cart” Color

.sqs-add-to-cart-button {
    background: #ff0000 !important;
    border-color: green !important;
}

Hide Share Social Icon under Add to Cart

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

Blog

Remove Blog Post Date

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

Remove Author

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

Decrease Padding between Header and Blog Title

.view-item.collection-type-blog section.Main-content {
    padding-top: 0;
}

Featured Image: Squarespace