CSS Snippets

7 min read Updated

These CSS snippets change parts of the Unwind header, menu, layout, footer and WooCommerce pages that the theme settings do not reach. Add a snippet in one of these places:

  • AppearanceCustom CSS, if you use SiteOrigin CSS.
  • AppearanceCustomizeAdditional CSS.
  • The style.css file of a child theme. Make sure the child theme loads its stylesheet after the Unwind stylesheet, as the Child Theme page shows.

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

Header

Change the Top Bar Background and Border Colors

The top bar holds the menu in the Menu above header and Menu below header designs, and the search and social icons in the other two designs. The second rule stops the search and menu buttons from turning white on hover.

#masthead .top-bar {
	background: #f4f4f4;
	border-color: #ebebeb !important;
}
#masthead .top-bar .search-toggle:hover,
#masthead .top-bar .menu-toggle:hover {
	background: none;
}

Adjust the Site Title Font Size for Mobile

The default site title size is 4rem, and 3.2rem on screens up to 480px wide. Change the breakpoint and the size as you need. The Menu inline with logo header design uses a smaller title with its own rule, so this snippet does not change it.

@media (max-width: 768px) {
	#masthead .site-branding .site-title {
		font-size: 48px;
	}
}

Remove the Logo Area Padding and Maximum Width

This snippet lets the logo area use the full width of the screen, with no side padding. It works with the Menu above header design, and with Menu centered below header when the top bar shows. Set the top and bottom padding with Header Padding in AppearanceCustomizeTheme SettingsHeader.

.site-header .top-bar ~ .container {
	max-width: none;
	padding: 0;
}

Menu

Adjust the Main Menu Font

The menu uses the Details Font setting in AppearanceCustomizeTheme SettingsFonts, which also styles other small text. Use this snippet to change the top level menu items only. The drop down menus keep their own style.

.main-navigation > div > ul > li > a {
	font-family: Lato, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

By default the menu links use Medium Text Color and change to Dark Text Color on hover. Both settings are in AppearanceCustomizeTheme SettingsFonts and also color other text. This snippet sets the menu colors only, including the search, close and mobile menu icons. The values below are the defaults.

.main-navigation > div li a {
	color: #626262;
}
.main-navigation > div li:hover > a,
.main-navigation > div li.focus > a {
	color: #2d2d2d;
}
.search-toggle .open .svg-icon-search path,
.search-toggle .close .svg-icon-close path,
.menu-toggle .svg-icon-menu path {
	fill: #626262;
}

Adjust the Space Between Main Menu Items

Unwind adds 45px of space to the right of each top level menu item, except the last one. Change the value as you need.

.main-navigation > div > ul > li {
	padding-right: 30px;
}

Adjust the Mobile Menu Border and Background Colors

The first rule sets the line above each sub menu, and the second sets the background and the bottom border of the top level items; sub menu items keep a white background. The values below are the defaults.

#mobile-navigation ul ul {
	border-top: 1px solid #ebebeb;
}
#mobile-navigation ul li {
	background: #f4f4f4;
	border-bottom: 1px solid #ebebeb;
}

Layout

Adjust the Site Container Padding

The default padding at the left and right of the site container is 25px, and 15px on screens up to 480px wide. This snippet sets one value for all screens. When Constrain is off in AppearanceCustomizeTheme SettingsFooter, the footer uses its own Side Padding setting instead.

.container {
	padding: 0 25px;
}

Remove the Container Padding on Full Width Pages

This snippet applies to pages that have Page Layout set to Full Width in the Page settings box.

.page-layout-full-width .site-content .container {
	padding-right: 0;
	padding-left: 0;
}

Remove the Decorative Borders

This snippet removes the lines around the header, the top bar, the menu bar, the posts in the blog list, the post navigation, the comment form title and the footer.

#masthead,
#masthead .top-bar,
#masthead .main-navigation-bar,
.header-design-2 #masthead .top-bar,
.sticky-menu.sticky-bar-out #masthead .sticky-bar,
.archive-entry,
.post-navigation,
.comment-reply-title,
#colophon.footer-active-sidebar,
#colophon .site-info {
	border: none;
}

Remove the Heading Lines

Unwind shows a line on each side of the widget titles and of some headings, for example the related posts and Share This headings. This snippet removes the lines.

.heading-strike:before,
.heading-strike:after {
	content: none;
}

Remove the List Widget Borders

This snippet removes the line between list items in these WordPress widgets: Archives, Categories, Meta, Recent Comments and Recent Posts. It applies in the sidebar, the footer and the Masthead widget area.

#secondary .widget.widget_archive ul li, #secondary .widget.widget_categories ul li, #secondary .widget.widget_meta ul li, #secondary .widget.widget_recent_comments ul li, #secondary .widget.widget_recent_entries ul li,
#colophon .widget.widget_archive ul li, #colophon .widget.widget_categories ul li, #colophon .widget.widget_meta ul li, #colophon .widget.widget_recent_comments ul li, #colophon .widget.widget_recent_entries ul li,
#masthead-widgets .widget.widget_archive ul li, #masthead-widgets .widget.widget_categories ul li, #masthead-widgets .widget.widget_meta ul li, #masthead-widgets .widget.widget_recent_comments ul li, #masthead-widgets .widget.widget_recent_entries ul li {
	border: none;
}

Posts Slider

Adjust the Posts Slider Title, Overlay and Mobile Height

These rules apply to the posts slider on the blog page and to the Posts Slider template of the Post Loop Widget. The overlay rule only works when Jetpack Featured Content slider image overlay. Also applies to slider in Post Loop widget. is on in AppearanceCustomizeTheme SettingsBlog. Change the last overlay value, 0.5, to make the images darker or lighter. The mobile rules apply up to 768px, so they also replace the smaller values Unwind uses on screens up to 480px wide.

.flexslider.featured-posts-slider .featured-posts-slides .featured-post-slide .slide-content .entry-title {
	font-size: 28px;
	text-transform: uppercase;
}
.flexslider.featured-posts-slider .featured-posts-slides .featured-post-slide .slide-content.slide-overlay {
	background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
	.flexslider.featured-posts-slider .featured-posts-slides .featured-post-slide {
		height: 380px;
	}
	.flexslider.featured-posts-slider .featured-posts-slides .featured-post-slide .slide-content .entry-title {
		font-size: 24px;
	}
	.flexslider.featured-posts-slider .featured-posts-slides .featured-post-slide .slide-content .slide-inner-cell {
		padding-top: 27px;
	}
}

Hide the Posts Slider on Mobile

This snippet hides the slider on screens up to 780px wide. It also hides sliders that use the Posts Slider template of the Post Loop Widget.

@media (max-width: 780px) {
	.featured-posts-slider {
		display: none;
	}
}

Set a Black Footer with White Text

This snippet sets a black background for the footer and white text for the widgets and the bottom bar.

#colophon {
	background: #000;
}
#colophon.footer-active-sidebar {
	border-top-color: #000;
}
#colophon,
#colophon .widget .widget-title,
#colophon .widget a,
#colophon .site-info {
	color: #fff;
}
#colophon .site-info {
	border-top-color: #333;
}
#colophon .site-info a:hover {
	color: #adadad;
}

Adjust the Footer Bottom Bar Text and Link Colors

The bottom bar shows the Footer Text, the privacy policy link and, by default, the theme credit. The values below are the defaults.

#colophon .site-info,
#colophon .site-info a {
	color: #626262;
}
#colophon .site-info a:hover {
	color: #2d2d2d;
}

Text

Adjust the Code Block Font

This snippet sets the font of preformatted text and code blocks. The value below is the default.

pre {
	font-family: "Courier 10 Pitch", Courier, monospace;
}

WooCommerce

Open the Mini Cart Drop Down to the Left

If the mini cart is near the right edge of the screen, part of the drop down can be out of view. This snippet aligns the drop down with the right edge of the cart icon, so it opens to the left. The Menu inline with logo design does this by default.

.main-navigation .shopping-cart .shopping-cart-dropdown {
	right: 0;
}

Change the Product Hover Background Color

When Quick View or Add to Cart is on in AppearanceCustomizeTheme SettingsWooCommerce, the product image on shop and archive pages fades on hover and shows this color behind it. The default is the Dark Accent Color setting in AppearanceCustomizeTheme SettingsBranding.

.woocommerce ul.products li.product .loop-product-thumbnail {
	background: #00a76a;
}