CSS Snippets

4 min read Updated

These CSS snippets change parts of the North header, menu, layout and WooCommerce pages that the 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 North stylesheet, as the Child Theme page shows.

Before you add a snippet, check that a North 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 Tagline on Mobile

This snippet hides the site description on screens up to 780px wide. Change the value as you need. To hide the description on all screens, turn off Site Description in AppearanceCustomizeTheme SettingsBranding.

@media (max-width: 780px) {
	.site-description {
		display: none;
	}
}

Hide the Top Bar and the Header

This snippet hides the top bar, the header and the space that the sticky header keeps, on all pages.

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

To hide them on one page, add the page class to each selector. Replace 23 with the page ID of your page. For a post, use .postid-23. To hide the header of one page without CSS, turn on Hide Masthead in the Page settings box of the page. That setting keeps the top bar. See Page Settings.

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

Remove the Sticky Header Shadow

North adds a light shadow below the header when the header sticks to the top of the screen.

#masthead.floating {
	box-shadow: none;
}

Adjust the Sticky Header Background Opacity

This snippet sets the header background while the header sticks to the top of the screen. 255, 255, 255 is the RGB value of the color. 0.9 is the opacity, from 0 (transparent) to 1 (solid). To set the opacity of a header that overlaps the content at the top of the page, use Background Color Overlap Opacity in AppearanceCustomizeTheme SettingsHeader.

#masthead.floating {
	background: rgba(255, 255, 255, 0.9);
}

Hide the Logo in the Sticky Header and Center the Menu

#masthead.floating .site-branding {
	display: none;
}
#masthead.floating .main-navigation {
	text-align: center;
	width: 100%;
}

Full Width Header Contents

This snippet removes the maximum width of the header contents. You can use a fixed or a percentage value in place of none. Change the padding as you need.

.site-header .container {
	max-width: none;
	padding: 0 20px;
}

Menu

Center Align the Drop Down Menus

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

Adjust the Menu Font Size

The value below is the default size. Change the value and the unit as you need, for example to 15px. To change the menu font family, use Menu font in AppearanceCustomizeTheme SettingsFonts.

.main-navigation {
	font-size: 0.95em;
}

Add a Down Arrow to Parent Menu Items

This snippet adds an arrow after each main menu item that has a drop down.

.main-navigation ul .menu-item-has-children > a:after,
.main-navigation ul .page_item_has_children > a:after {
	content: "\2228";
	font-size: 8px;
	line-height: normal;
	padding-left: 6px;
	position: relative;
	top: 1px;
}

Layout

Adjust the Site Container Width

The default maximum width of the top bar, header and content is 1040px. Change 1200px to the width you want, or use none for full width. The footer is full width by default. To limit it to the same width, turn on Constrain in AppearanceCustomizeTheme SettingsFooter. To make the content of one page full width, set Page Layout to Full Width in the Page settings box.

body.responsive .container {
	max-width: 1200px;
}

Display the Sidebar Above the Content on Mobile

North moves the sidebar below the content on screens up to 600px wide. This snippet moves it above the content at the same width.

@media (max-width: 600px) {
	body.responsive #content.site-content > .container {
		display: flex;
		flex-direction: column-reverse;
	}
	body.responsive #content.site-content .widget-area {
		padding: 0 0 40px;
	}
}

Hide the Footer on One Page

Replace 23 with the page ID. To hide only the footer widgets, turn on Hide Footer Widgets in the Page settings box.

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

Text

This snippet removes the underline from links in your content. Some theme links, for example the breadcrumbs, still show an underline on hover. Without the underline, links in text stand out by color only.

a {
	text-decoration: none;
}

WooCommerce

Show Two Products per Row on Mobile

North shows one product per row on shop and archive pages on screens up to 600px wide. This snippet shows two.

@media (max-width: 600px) {
	body.responsive.woocommerce #main ul.products li.product {
		margin-right: 3.333%;
		width: 48.3335%;
	}
	body.responsive.woocommerce #main ul.products li.product:nth-of-type(2n) {
		margin-right: 0;
	}
}

Move the Single Product Price onto Its Own Line

.woocommerce.single #content div.product p.price {
	float: none;
}

Change the Mini Cart Count Border

The value below is the default border of the item count on the cart icon in the menu.

.main-navigation .shopping-cart .shopping-cart-count {
	border: 2px solid #fff;
}