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

Footer Contents Full-Width

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

Remove the Header 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 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;
}

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

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

Adjust the Main Menu Font Size
The default is 0.8rem, you can use px or any measurement unit you prefer.

.main-navigation ul li {
	font-size: 0.8rem;
}