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

Remove Sticky Logo and Center Menu

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

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

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

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;
	}
}
a {
	text-decoration: none;
}