Jump Start Common CSS Snippets

Applies to: Jump Start 2.1+

In this article, I’ve put together some answers to commonly asked CSS questions about customizing Jump Start. If you’re brand new to customization and applying CSS to your website, make sure to checkout the previous articles in this section, as well.

One of the hardest parts of writing your custom CSS is determining the exact selectors to use in your child theme style.css that will override what the theme is doing. So while the CSS snippets in this article may not be exactly what you need, they’re setup to give you good starting points with the proper selectors to target what you want. Don’t be afraid to copy what’s here and then continue to edit it on your own site to learn and grow in your CSS knowledge!

Note: This is a working article that’ll continue to grow as we accumulate more common CSS snippets.

Header

How can I fix position the mobile header?

In Jump Start 2.2, the mobile header became its own top-level component, which is separate from the desktop header. So making customizations like this is quite simple and doesn’t even require a @media query!

body {
	padding-top: 64px; /* matches mobile header height */
}
.tb-mobile-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
}

How can I make the mobile header and logo taller?

Starting with Jump Start 2.2, if you’re using any of the theme bases, other than Developer, you’ll find an option to adjust your mobile header’s height at Appearance > Theme Options > Styles > Mobile Header.

And if you’re using the Developer base, here’s how you can manually adjust the mobile header height with custom CSS.

.tb-mobile-header > .wrap {
	height: 64px; /* mobile header height */
}
.tb-mobile-header .site-logo img {
	max-height: 54px; /* any number less than height */
}

Main Menu

This comes up pretty often, and it’s even done with Custom CSS on one of the demos. Thanks to all the CSS classes WordPress adds to the menu output, this is easy to do.

.tb-primary-menu > li.current-menu-item > .menu-btn {
	background-color: #0f74a8;
}

Some people didn’t like the styling adjustments made in Jump Start v2.1 for the main menu dropdowns. The following CSS is an example of how to style the dropdown itself and the buttons within.

.tb-primary-menu ul.non-mega-sub-menu {
	border: 1px solid #222;
	padding: 0;
}
.tb-primary-menu ul.sub-menu .menu-btn {
	color: #222;
	padding: 10px;
}
.tb-primary-menu ul.sub-menu .menu-btn:hover {
	background-color: #222;
	color: #fff;
}

How do I remove the opacity on full-screen and full-width featured images above the content?

When a featured image is set to be full-screen or full-width above the content of the current page, the image is darkened a bit, in order for the title of the current page or post to be readable on top of the image. This feature can be easily removed by just setting the opacity of the image back to 100%.

.epic-thumb.tb-parallax .parallax-figure.on img, 
.epic-thumb.fw img {
	opacity: 1;
}

For mobile devices, how can I overlay the page title over full-screen and full-width featured images above the content?

When a featured image is set to be full-screen or full-width above the content of the current page, the title of the page gets overlaid on top of the featured image. This creates a big, beautiful display for your page titles. But when going down to mobile, the title is then displayed above the image, and no longer overlaid on top.

This is a very intentional feature, to allow for both the featured image and title of the page to display more clearly on mobile devices, for a wider range of title lengths and image sizes. However, if you would like to add some custom styles to mimic the look of these featured images on desktop, for mobile devices, the following will get you started. 

@media (max-width: 767px) {
	.epic-thumb.tb-parallax,
	.epic-thumb.fw {
		background: #000;
	}
	.epic-thumb.tb-parallax .parallax-figure.on img,
	.epic-thumb.fw img {
		opacity: .6;
	}
	.epic-thumb .epic-thumb-header {
		padding: 0 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		width: 100%;
		z-index: 1;
	}
	.epic-thumb .epic-thumb-header .entry-title {
		color: #fff;
	}
}

Content

How do I change the default color of body text?

The default body text color is #666, but if you’d like to change it, the following basic snippet would cover most circumstances.

body,
.text-dark {
  color: #000;
}

How do I change the default color of heading text?

And by default, heading text (i.e. h1, h2, h3, etc tags) are styled to be slightly darker than the body text. The following CSS snippet will help you get started adjusting that.

h1, h2, h3, h4, h5, h6 {
  color: #000;
}