CSS Snippets

6 min read Updated

These CSS snippets do small jobs that the Corp settings do not cover. Add a snippet in one of these places:

Before you add a snippet, check that a Corp setting does not already do the job. Many colors, sizes and header options are in Theme Settings. For PHP changes, see Advanced Customizations.

Header

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

Corp has settings for these colors: Background Color and Border Color in AppearanceCustomizeTheme SettingsHeader. The values below are the defaults.

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

Remove the Header on a Given Page

Replace 23 with the page ID of the page you work on. To remove the header of one page without CSS, turn off Header in the Page Settings box.

.page-id-23 .site-header,
.page-id-23 .masthead-sentinel {
	display: none;
}
.page-id-23 .site-content {
	margin-top: 60px;
}
.site-header,
.masthead-sentinel,
.site-footer {
	display: none;
}
.site-footer .corp-container {
	max-width: none;
}

Remove the Footer on a Given Page

Replace 23 with the page ID of the page you work on. To remove the footer of one page without CSS, turn off Footer in the Page Settings box.

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

The selectors cover the footer widgets and the widgets in the sidebar.

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

Adjust the Footer and Sidebar Widget Text Size

The selectors cover the footer widgets and the widgets in the sidebar.

.site-footer .widget, .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)~* {
	font-size: 14px;
}

Menu

Clear Max Mega Menu Below the Logo for Mobile

The Corp stylesheet puts the Max Mega Menu (MMM) below the logo on screens up to 600px wide. If you set the MMM mobile breakpoint to a larger value, add this snippet and change the max-width value to match the new breakpoint.

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

Align the Drop Down Contents to the Right

Right align the items of the main menu drop downs.

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

Remove the Header Menu Hover Underline

You can also turn off Menu Link Hover Underline in AppearanceCustomizeTheme SettingsNavigation.

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

Adjust the Menu Accent Color

The Link Hover Accent Color setting in AppearanceCustomizeTheme SettingsNavigation does this too. The default is #f14e4e.

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

This sets the color on hover and for the current item and its parent items.

.main-navigation div > ul:not(.cart_list) > li:hover > a,
.main-navigation div > ul:not(.cart_list) > li.current > a,
.main-navigation div > ul:not(.cart_list) > li.current_page_item > a,
.main-navigation div > ul:not(.cart_list) > li.current-menu-item > a,
.main-navigation div > ul:not(.cart_list) > li.current_page_ancestor > a,
.main-navigation div > ul:not(.cart_list) > li.current-menu-ancestor > a {
	color: #f14e4e;
}
.stuck .main-navigation ul li a {
	color: #2d2d2d;
}
.stuck #mobile-menu-button svg path {
	fill: #2d2d2d;
}

Adjust the Main Menu Font Family and Weight

The menu font family follows the Heading Font setting in AppearanceCustomizeTheme SettingsTypography. Set the menu font size with Menu Font Size in AppearanceCustomizeTheme SettingsNavigation. Use this snippet to set a different family or weight for the menu only.

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

Layout

Adjust the Overall Theme Container Width

The default maximum width is 1170px. Change 1300px to the width you want.

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

Adjust the Overall Theme Container Padding

The default is 0 15px. You can use a px or a % value.

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

Adjust the Overall Theme Container Padding for Desktop

This rule applies above the min-width value. Change the min-width and the padding as you need.

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

Display the Sidebar Above the Main Content on Mobile

Corp collapses the sidebar below the content at 768px. This snippet moves it above the content at the same width.

@media (max-width: 768px) {
	#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;
	}
}

Blog and Text

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 Alternate Blog Layout Post Title Font Size

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

Sidebar links use the text color and change to the accent color on hover. Use this snippet to set the two colors yourself. The values are the defaults of Text Color and Accent Color in AppearanceCustomizeTheme SettingsTypography.

.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

Change normal to 2 for more space between list items.

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

Adjust the Paragraph Font Size

To change the body font size for the whole site, use Body Font Size in AppearanceCustomizeTheme SettingsTypography. This snippet changes paragraphs only.

p {
	font-size: 15px;
}

Buttons

Adjust the Button Styling Apart from the Accent Color

Corp uses the Accent Color setting in Typography for buttons. Use this snippet to style buttons with other colors.

/* Default Button Styles */
button {
	background: #007cba;
	border-radius: 4px;
	border: none;
	color: white;
	cursor: pointer;
	padding: 10px 20px;
	transition: background 0.3s;
}
/* Hover Styles */
button:hover {
	background: #005a87;
}
/* Focus Styles */
button:focus {
	outline-offset: 2px;
	outline: 2px solid #007cba;
}

WooCommerce

Change the WooCommerce Mini Cart Icon to a Basket

This snippet needs Font Awesome on your site, for example from the Font Awesome plugin. The snippet uses Font Awesome 6. If your plugin loads Font Awesome 5, change the font family to "Font Awesome 5 Free".

.site-header .shopping-cart-link svg {
	display: none;
}
.site-header .shopping-cart-link:before {
	color: #2d2d2d;
	content: "\f291";
	display: block;
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	font-weight: 900;
}