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.

Remove Tagline on Mobile

@media (max-width: 780px) {
	.site-description {
		display: none;
	}
}

Hide the Top Bar, Header, and Sticky Header

#topbar,
.site-header,
.masthead-sentinel {
	display: none;
}

If you’d like to do this on a particular page, prefix each selector with the page ID, replacing “xx” with the ID.

.page-id-xx #topbar,
.page-id-xx .site-header,
.page-id-xx .masthead-sentinel {
	display: none;
}

Center Align Drop-Down Menus

.main-navigation ul ul li {
	text-align: center;
}

Header Overlap: Adjust Header Background Opacity

#masthead.floating {
	background: rgba(255, 255, 255, 0.9);
}

255, 255, 255 represents the header background RGB color value. Adjust the 0.9 value to control the opacity. This value can be taken as 0 to 100%. For example, 0.5 is 50%.

Remove Sticky Logo and Center Menu

#masthead.floating .site-branding {
	display: none;
}

#masthead.floating .main-navigation {
	text-align: center;
	width: 100%;
}

WooCommerce: Change the Shop/Archive to Two Columns on Mobile

@media (max-width: 600px) {
	body.responsive.woocommerce #main ul.products li.product {
		margin-right: 3.333%;
		width: 48.3335%;
	}
	body.responsive.woocommerce #main ul.products li.product:nth-of-type(2n) {
		margin-right: 0;
	}
}

WooCommerce: Move the Single Product Price Onto Its Own Line

.woocommerce.single #content div.product p.price {
	float: none;
}

WooCommerce: Change the Mini Cart Count Border

.main-navigation .shopping-cart .shopping-cart-count {
    border: 2px solid #fff;
}

Display the Sidebar First on Mobile

@media (max-width: 768px) {

	.site-content > .container {
		display: flex;
		flex-direction: column-reverse;
	}

	.widget-area {
		padding-top: 0 !important;
		padding-bottom: 40px !important;
	}
}

Remove Link Underline

a {
	text-decoration: none;
}

Change the Menu Font Size

The below value is the default size. Change the value and the unit of measurement as required. For example, px can be used.

.main-navigation {
	font-size: .95em;
}

Full Width Header

The below rule will remove the width of the North header content container. none can be replaced with a fixed or percentage value. The padding value can be adjusted as required.

.site-header .container {
    padding: 0 20px;
    max-width: none !important;
}

Full Width Site Container

The below rule will remove the width of the North content container. none can be replaced with a fixed or percentage value. The padding value can be adjusted as required.

.container {
    padding: 0 20px;
    max-width: none !important;
}

Add a Down Arrow to the Main Menu Parent Menu Items

.main-navigation ul .menu-item-has-children > a:after,
.main-navigation ul .page_item_has_children > a:after {
	content: "\2228";
	font-size: 8px;
	line-height: normal;
	padding-left: 6px;
	position: relative;
	top: 1px;
}