Margot Template: Celebrate your business with powerful testimonials and full-width image carousels.

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

Centre mobile navigation

nav.Mobile-overlay-nav.Mobile-overlay-nav--primary a {
    text-align: center;
}

Fixed Header

.Header {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
}
.Content-outer {
    margin-top: 70px;
}

Force mobile navigation style hamburger (all devices)

header.Header.Header--bottom {
    display: none !important;
}
[data-nc-base="mobile-bar"] {
    display: block;
}

Word “Menu” display below hamburger icon

button.Mobile-bar-menu:after {
    content: "Menu";
    font-size: 10px;
    position: absolute;
    right: 20px;
    top: 45px;
}

Adjust Site Title font size & color on mobile

a.Mobile-bar-branding {
    color: #ff0000 !important;
    font-size: 50px !important;
}

Hide Social Icons

.Header-social {
    display: none;
}

Hide Twitter Icon

a.SocialLinks-link.twitter {
    display: none;
}

Hide Email icon

.SocialLinks-link.email {
    display: none;
}

Navigation Active Link Color

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

Footer

Footer Navigation Link Color

.Footer-nav-item {
    color: #ff0000 !important;
}
/* Hover */
.Footer-nav-item:hover {
    color: #000 !important;
}

Blog

Remove “Read More”

.BlogList-item-readmore {
    display: none !important;
}

Change “Read More” in Blog Page

.BlogList-item-readmore span {
    visibility: hidden;
}
.BlogList-item-readmore span:after {
    content: "See Details >>>";
    visibility: visible;
    display: block;
}
.BlogList-item-readmore span:hover:after {
    color: rgba(0,0,0,0.5);
}

Customize “Read More” Button for Blog Excerpt

.BlogList-item-readmore span {
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 18px;
}

Change color of all blog links

.sqs-block-html p a, .sqs-block-markdown p a, .sqs-block-image p a, .sqs-block-html blockquote a, .sqs-block-markdown blockquote a, .sqs-block-image blockquote a, .sqs-block-html ol a, .sqs-block-markdown ol a, .sqs-block-image ol a, .sqs-block-html ul a, .sqs-block-markdown ul a, .sqs-block-image ul a {
 color: #000;
 border-bottom-color: rgba(0,0,0,.7);
 }

Remove Blog Posts Date

/* Date on Blog Page */
time.Blog-meta-item.Blog-meta-item--date {
    display: none;
}

Remove Social Sharing Icons

/* Hide all icons */
.Share-buttons {
    display: none;
}
/* Hide Facebook icon */
.Share-buttons a:first-child {
    display: none;
}
/* Hide Heart Icon */
.Share-buttons a:last-child {
    display: none;
}
/* Hide Twitter Icon */
.Share-buttons a:nth-child(10n+2) {
    display: none;
}
/* Hide Tumblr Icon */
.Share-buttons a:nth-child(10n+3) {
    display: none;
}
/* Hide Pinterest Icon */
.Share-buttons a:nth-child(10n+4) {
    display: none;
}

Remove Post Category

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

Featured Image: Squarespace.com