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;
}

Adjust the Main Menu Font Family, Font Size, Letter Spacing, and Text Transform

.main-navigation > div li a {
	font-family: Lato, sans-serif;
	font-size: .8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

Adjust the Main Menu Link Color and Link Hover Color

.main-navigation > div li a,
.search-toggle .open .svg-icon-search path,
.menu-toggle .svg-icon-menu path {
	color: #626262;
}

.main-navigation > div li.focus > a,
.main-navigation > div li:hover > a {
	color: #2d2d2d;
}

.social-search .v-line {
	background: #ebebeb;
}

.search-toggle .open .svg-icon-search path,
.menu-toggle .svg-icon-menu path,
.search-toggle .close .svg-icon-close path {
	fill: #626262;
}

.search-toggle:hover {
	background: none;
}

Adjust the Main Menu Horizontal Padding

The negative margin values must match whatever positive values are set for right and left padding.

.main-navigation > div li a {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: -15px;
	margin-left: -15px;
}

Adjust the Mobile Menu Border and Top Level Background Color

#mobile-navigation ul ul {
    border-top: 1px solid #ebebeb;
}

#mobile-navigation ul li {
    background: #f4f4f4;
    border-bottom: 1px solid #ebebeb;
}

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;
}

Adjust the Footer Bottom Bar Link and Text Colors

#colophon .site-info {
	color: #626262;
}

#colophon .site-info a {
    color: #626262;
}

#colophon .site-info a:hove {
    color: #2d2d2d;
}