CSS Snippets

Below you’ll find CSS snippets to achieve small tasks that might not be included in Theme Settings. These snippets can be added to AppearanceCustom CSS if using SiteOrigin CSS, CustomizeAdditional CSS or your child theme style.css file.

Change the Top Bar Background and Border Colors

#masthead .top-bar {
    background: red;
    border-color: red !important;
}

Change the WooCommerce Mini-Cart Dropdown Direction
If your mini-cart is at the edge of your screen and the contents are being hidden out of view during hover, use this snippet to change the drop-down direction to the left.

.main-navigation .shopping-cart .shopping-cart-dropdown {
	right: 0;
}

Change the WooCommerce Product Archive Hover Background Color

.woocommerce ul.products li.product .loop-product-thumbnail {
	background: #00a76a;
}

Remove All Layout Related Decorative Borders

#masthead, #masthead .top-bar,
#masthead .main-navigation-bar,
.header-design-2 #masthead .top-bar,
.archive-entry,
#colophon.footer-active-sidebar,
.post-navigation,
.comment-reply-title,
#colophon .site-info {
	border: none;
}

Remove List Type Widget Decorative Borders

#colophon .widget.widget_archive ul li, #colophon .widget.widget_categories ul li, #colophon .widget.widget_meta ul li, #colophon .widget.widget_recent_comments ul li, #colophon .widget.widget_recent_entries ul li, #masthead-widgets .widget.widget_archive ul li, #masthead-widgets .widget.widget_categories ul li, #masthead-widgets .widget.widget_meta ul li, #masthead-widgets .widget.widget_recent_comments ul li, #masthead-widgets .widget.widget_recent_entries ul li, #secondary .widget.widget_archive ul li, #secondary .widget.widget_categories ul li, #secondary .widget.widget_meta ul li, #secondary .widget.widget_recent_comments ul li, #secondary .widget.widget_recent_entries ul li {
    border: none;
}

Remove Widget Title Decorative Borders

.heading-strike:after, .heading-strike:before {
    content: none;
}

Adjust the Site Title Font Size for Mobile
Adjust the breakpoint and font-size values as required.

@media (max-width: 768px) {
	#masthead .site-branding .site-title {
		font-size: 64px;
	}
}

Remove the Featured Posts Slider for Mobile

@media (max-width: 780px) {
	.featured-posts-slider {
		display: none !important;
	}
}

Remove the Site Title/Logo Padding and Max-Width Constraint for the Default Header Layout

.site-header .top-bar ~ .container {
    max-width: none;
    padding: 0;
}

Adjust the Left-Right Site Container Padding

.container {
	padding: 0 25px;
}

When the Page Layout Is Set to Full Width Remove the Container Right and Left Padding

.page-layout-full-width .site-content .container {
	padding-right: 0;
	padding-left: 0;
}

Adjust the Footer Background Color to Black and the Text to White

#colophon.footer-active-sidebar {
	background: #000;
	border-top: 1px solid #000;
}

#colophon * {
	color: #fff;
}