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.

Expand Main Menu Drop-Down Width

The rules below will prevent drop-down menu items from word-breaking and allow drop-down items to extend to their full width.

.main-navigation ul ul a {
	white-space: nowrap;
	width: auto;
}

.main-navigation ul ul li {
	min-width: 100%;
}

If you’re using Polylang with two languages and have added one widget to the footer widget area, the theme will split the widget area up into two 50% columns. This is because the widget count is two, even though only one widget displays per language. To resolve this problem, you can use the below snippet:

#footer-widgets .widget {
	width: 100% !important;
}

Adjust the above 100% value as required. If, for example, you have five widgets, but only four should display per language, the rule would be as follows.

#footer-widgets .widget {
	width: 25% !important;
}

#colophon .widget_nav_menu .menu-item a {
	border-bottom: none;
}
Hide the Mobile Menu Text

If you’d like to hide the word Menu next to the mobile icon, try the following:

.mobilenav-main-link-text {
	display: none;
}

#343538 should be changed to match your menu background color. #00bcff should be changed to match your menu hover color. #e2e2e2 should be changed to match your menu text color.

Adjust the Mobile Menu “Menu” Text Font Size
.menu-mobilenav-container > ul > li[style] {
	font-size: 13px !important;
}
Prevent Header Menu Widget from Collapsing into Mobile Menu

If you’ve inserted a Navigation Menu widget into the Header widget area and want to prevent it from collapsing into a mobile menu, the below snippet can be used. Changed 480 to match your chosen Mobile Menu Collapse resolution.

@media screen and (max-width: 480px) {
	#header-sidebar .so-mobilenav-standard+* {
		display: block !important;
	}

	#header-sidebar .so-mobilenav-mobile+* {
		display: none !important;
	}
}
Center the Header Sidebar

To be used in conjunction with the Center Logo setting.

body.responsive #masthead .hgroup {
	display: block;
	text-align: center;
}

body.responsive #masthead .hgroup .support-text,
body.responsive #masthead .hgroup #header-sidebar {
	display: block;
	margin-top: 30px;
	max-width: 100%;
	position: static;
}

body.responsive #masthead .hgroup #header-sidebar {
	height: auto;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

body.responsive #masthead .hgroup #header-sidebar .widget {
	display: block;
	float: none;
	margin: 0 auto;
}
Adjust the Sidebar Width
#primary {
	width: 71.287%;
}

#secondary {
	width: 23.762%;
}

Adjust the primary and sidebar container widths as required. The two values must equal 95.049% when combined.

Add a Sidebar Background Color and Padding
#secondary {
	background: red;
	padding: 20px;
}

Adjust the red value and the 20px to suit your layout.

Adjust the Sidebar Widget Title Color
#secondary .widget .widget-title {
	color: #3b3b3b;
}

Adjust #3b3b3b; to your preferred color.

Logo in Menu: Transparent Menu

A transparent menu background until scroll. This assumes the Logo in Menu layout and Sticky MenuL are being used. The below snippet also assumes the first item on every page is a slider applied using the Page Slider setting. Adjust the 53px value to match the height of your menu.

.main-navigation:not(.sticky) {
	background: transparent;
}

#main-slider {
	margin-top: -53px;
}
Adjust the Padding Around the Main Content Container
#main {
	padding-top: 35px;
	padding-right: 35px;
	padding-bottom: 35px;
	padding-left: 35px;
}
Adjust the Site Container Width – Full Width
.full-container {
	max-width: 1080px !important;
}
Adjust the Site Container Width – Boxed
#page-wrapper {
	max-width: 1080px !important;
}
Adjust the Header Container Width – Full Width
.site-header .full-container {
	max-width: 1080px !important;
}
No Sidebar Content Container Width

Set a maximum width for the No Sidebar content container.

@media (min-width: 1024px) {
	.no-sidebar .entry-content {
		margin-right: auto;
		margin-left: auto;
		max-width: 980px;
	}
}

The Vantage body background and footer background colors are the same. On pages without much content, this can lead to the appearance of a large footer. If this is something you’d like to change, you can either change the body background color to white or set a minimum height for the content container, thereby pushing the footer down the page.

Change the Body Background Color to White

body {
	background: #fff;
}

Set a Content Container Minimum Height

.site-main {
	min-height: 500px;
}

The value above can be adjusted as required.

@media (min-width: 680px) {
	html,
	body {
		height: 100%;
	}

	#page-wrapper {
		min-height: 100%;
		position: relative;
	}

	#main.site-main {
		padding-bottom: 275px; /* Ensure the footer doesn't overlap */
	}

	.site-footer {
		bottom: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		position: absolute !important;
		right: 0 !important;
	}
}

#footer-widgets {
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#footer-widgets .widget .widget-title {
	font-size: 14px;
}
Adjust the Footer Widget Content Font Size
#footer-widgets .widget .widget-title ~ * {
	font-size: 13px;
}
Adjust the Bottom Bar Font Size
#footer-widgets ~ div {
	font-size: 12px !important;
}
Adjust the Mobile H1 – H6 Font Sizes
@media (max-width: 768px) {
	.entry-content h1 {
		font-size: 26px;
	}

	.entry-content h2 {
		font-size: 23px;
	}

	.entry-content h3 {
		font-size: 20px;
	}

	.entry-content h4 {
		font-size: 18px;
	}

	.entry-content h5 {
		font-size: 16px;
	}

	.entry-content h6 {
		font-size: 14px;
	}
}
Adjust the Footer Content Container Width
#footer-widgets.full-container {
    max-width: 1080px !important;
}
Remove Main Container Left and Right Padding on a Given Page

Replace 1 with the page ID you’re targeting.

.page-id-1 #main {
	padding-right: 0;
	padding-left: 0;
}