OM: Cool and calm, this website template elevates your content with clean layouts and a simple, open interface.

Notes

1. Adding Custom CSS at 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 (Right) – Navigation (Left)

div#lower-logo {
    float: right;
}
div#topNav {
    float: left !important;
}

Site Title (Above) – Navigation (Bottom)

div#lower-logo {
    float: none;
}
div#topNav {
    float: none !important;
}

Change last link color in navigation bar

.main-nav li:last-child a {
    color: #fff !important;
}

Translate “Menu” word (Phone)

div#mobileMenuLink a {
    visibility: hidden;
}
div#mobileMenuLink a:after {
    content: "ABCXYZ";
    visibility: visible;
    text-align: center;
    display: block;
    margin-top: -10px;
}

Remove Site Title

/* Remove Site Title on Entire Site */
.site-title h1.logo {
    display: none;
}

Removing site title (Specific Pages)

First, you need to find Page ID.

Then, use

/* Remove Site Title on Specific Page, collection..eae is Page ID */
body#collection-54073d70e4b021337ce34eae .site-title h1.logo {
    display: none;
}

Make navigation underneath the header/logo/site title on the left side of the page

div#lower-logo, div#topNav {
    float: none !important;
}

Remove the link from my site title

.logo a {
    pointer-events: none;
}

Last navigation item turned into the button

.main-nav li:last-child a {
    background: #000;
    color: #fff !important;
    padding: 10px 20px !important;
    font-weight: bold;
    border-radius: 20px;
}

Footer

Hide Social Icon at Bottom Right

#socialLinks {
    display: none;
}

Remove Footer

footer#footer {
    display: none;
}

Center social media icons in Footer

#socialLinks {
    display: block;
    text-align: center;
    width: 100%;
}

Remove Footer (Specific Page)

First, you need to find Page ID.

Then, use

body#collection-54073d70e4b021337ce34eae footer#footer {
    display: none;
}

Homepage

Background Color

.homepage div#canvas {
    background: #ff0000;
}

Background Color (Specific Page)

First, you need to find Page ID.

Then, use

body#collection-54073d70e4b021337ce34eae div#canvas {
    background: #ff0000;
}

Blog Page – Blog Posts

Remove Blog Posts Date

/* Hide date on Blog Page */
.collection-type-blog .date {
    display: none;
}
/* Hide date on Blog Posts */
.view-item span.date {
    display: none;
}