Home>Corp Documentation>CSS Snippets

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 the Sticky Header Drop Shadow on Scroll

.site-header.stuck {
	box-shadow: none;
}

Header Contents Full-Width

.site-header .corp-container {
	max-width: none;
}

Adjust the Header Background and Border Color

.site-header {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}

Footer Contents Full-Width

.site-footer .corp-container {
	max-width: none;
}

Remove the Footer on a Given Page
Replace 23 with the page ID of the page you’re working on.

.page-id-23 .site-header,
.page-id-23 .masthead-sentinel {
	display: none;
}

.page-id-23 .site-content {
	margin-top: 60px;
}

Remove the Footer on a Given Page
Replace 23 with the page ID of the page you’re working on.

.page-id-23 .site-footer {
	display: none;
}

Remove the Header and Footer on All Pages

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

Clear Max Mega Menu Below the Logo for Mobile
By default, the Max Mega Menu (MMM) mobile breakpoint setting is 600px. If you adjust this setting to a value greater than 600px, insert the below snippet in Additional CSS and adjust the max-width value to match your new breakpoint.

@media (max-width: 600px) {
	.mega-menu-menu-1 .site-header .site-header-inner {
		display: block;
	}
}

Change the Main Menu Drop-Down Contents to Right Aligned
Change the contents of the main menu drop-down items to right-aligned.

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

Remove the Header Menu Hover Underline

.main-navigation ul li a,
.main-navigation div > ul:not(.cart_list) > li:hover > a {
	border-bottom: none;
}

Adjust the Menu Accent Color

.link-underline.main-navigation div>ul:not(.cart_list)>li:hover>a, .link-underline.main-navigation ul .children li:first-of-type, .link-underline.main-navigation ul .sub-menu li:first-of-type, .main-navigation div>ul:not(.cart_list)>li.current-menu-ancestor>a, .main-navigation div>ul:not(.cart_list)>li.current-menu-item>a, .main-navigation div>ul:not(.cart_list)>li.current>a, .main-navigation div>ul:not(.cart_list)>li.current_page_ancestor>a, .main-navigation div>ul:not(.cart_list)>li.current_page_item>a {
	border-color: #f14e4e;
}

Set a Header Menu Link Hover Color

.main-navigation div > ul:not(.cart_list) > li:hover > a, .main-navigation div > ul:not(.cart_list) > li.current-menu-item > a {
	color: #f14e4e;
}

Adjust the Header Menu Link Color Once the Header Is Sticky

.stuck .main-navigation ul li a {
	color: #2d2d2d;
}
.stuck #mobile-menu-button svg path {
	fill: #2d2d2d;
}

Adjust the Overall Theme Container Width

.corp-container {
	max-width: 1300px;
}

Adjust the Overall Theme Container Padding
The default px value can be adjusted or you could use a % based value.

.corp-container {
	padding: 0 15px;
}

Adjust the Overall Theme Container Padding for Desktop
The below rule will apply above the min-width resolution value below. Adjust the min-width value and the padding value as required.

@media (min-width: 780px) {
	.corp-container {
		padding: 0 15px;
	}
}

Adjust the Main Menu Font Family, Size, and Weight

.main-navigation ul li {
	font-family: Montserrat,sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
}

Adjust the Sidebar Link Color
The sidebar uses the accent color for links inversely. Links will be displayed in the text color and use the accent color on hover. The following can be used to manually set the sidebar link colors.

.widget-area .widget:not(.widget_tag_cloud):not(.widget_shopping_cart) a:not(.button) {
	color: #626262;
}

.widget-area .widget:not(.widget_tag_cloud):not(.widget_shopping_cart) a:not(.button):hover {
	color: #f14e4e;
}

Add Spacing to List Items
Try changing normal to 2 for increased list item spacing.

.entry-content ul li {
	line-height: normal;
}

Display the Sidebar Above the Main Content Area on Mobile

@media (max-width: 786px) {
	#content .corp-container {
		display: flex;
		flex-direction: column-reverse;
	}

	.widget-area {
		border-top: none;
		border-bottom: 1px solid #d6d6d6;
		margin-top: 0;
		margin-bottom: 50px;
		padding: 0 0 50px;
	}

	.sidebar-left .content-area {
		margin: 0;
	}
}

Adjust the Standard Blog Layout Post Border and Background Colors

.blog-layout-standard article .corp-content-wrapper {
	border-color: #e6e6e6;
}

body:not(.single) .corp-content-wrapper {
	background: #fff;
}

Adjust the Alternative Blog Loop Post Title Font Size

.blog-layout-alternate .hentry .entry-title {
	font-size: 16px;
}

Adjust the Paragraph Font Size

p {
	font-size: 15px;
}

Remove Footer Widget Title Uppercase

.site-footer .widget .widget-title, .site-footer .widget .wp-block-group__inner-container :is(h1,h2,h3,h4,h5,h6), .widget-area .widget .widget-title, .widget-area .widget .wp-block-group__inner-container :is(h1,h2,h3,h4,h5,h6) {
	text-transform: none;
}

Change the WooCommerce Mini-Cart Icon to a Basket Using Font Awesome

Requires: Font Awesome plugin.

.site-header .shopping-cart-link svg {
	display: none;
}

.site-header .shopping-cart-link:before {
	color: #2d2d2d;
	content: "\f291";
	display: block;
	font-family: "FontAwesome";
	font-size: 16px;
}

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More