Jump Start Common CSS Snippets

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.

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

Featured Images

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