Skip to main content Skip to secondary navigation Accessibility Feedback

Adding a header background to Go Mobile First

A few weeks ago, I released a free mobile-first starter theme for WordPress called Go Mobile First. To help you use it, I’m writing a series of tutorials on how to make some common changes.

Today, we’ll be adding a background color to the header.

Getting Setup #

Before we get started, there’s a few things you’ll need to do:

  1. Download a good text editor. Gedit is free, cross-platform, and works really well.
  2. Install MAMP (or WAMP if you use Windows). This will let us work locally so we don’t mess up a live site. You can find really good instructions on setting up MAMP on Smashing Magazine.
  3. If you didn’t install WordPress as part of your MAMP setup, do that now.

Creating a Backup #

Before we start working, save a copy of Go Mobile First and rename the folder “go-mobile-first-with-header-background.” Then open up the style.css file and change the theme name to Go Mobile First with Header Background. If we mess anything up, you want it to be a copy, not the only version of your site.

Launch the WordPress admin panel and activate our “new” theme. Then, pull up the site.

Now, let’s get to it!

Note: This tutorial is based on version 1.4 of Go Mobile First, which was the most recent version at time of writing.

Adding a Background Color #

For this tutorial, we’ll be using the basic colors that come with the site:

  • Black: #272727
  • White: #ffffff

As you start to customize the theme over time, you can of course use whatever colors you’d like.

Adding a Wrapper Div #

Open header.php. A little ways down, you’ll see this bit of code:

<!-- Start Header content. Sets max width for content and centers text. -->
<header class="container text-center">

This starts the header. The class container limits the content width to 640 pixels or less and centers it. We want to wrap this section in a background color.

Right before the <header> element, add this:

<!-- Adds background color to navigation area -->
<div class="nav-wrap">

Right after the </header> element, add:

</div><!-- End Nav Wrap -->

This creates a wrapper around the header that we will style with the background color. Click save and refresh your browser.

Nothing should happen. That’s because we haven’t added any styling to nav-wrapper yet.

Styling the Nav-Wrapper #

Open style.css and scroll down to navigation section.

Before .logo:hover, add this:

/* Adds background color to navigation area */
.nav-wrap {
    background-color: #272727;
}

That sets the nav-wrapper background color to black.

Save and refresh your browser. The site should now look like this.

As you can see, there are a few issues:

  1. It doesn’t fill the whole width. Go Mobile First applies a 20 pixel padding to the left and right of the body. That’s what’s causing this.
  2. The logo and navigation aren’t visible.
  3. The borders on the navigation, which add needed division on an all white design, look weird with the background.

Let’s fix these.

Going Full Width #

In style.css, under .nav-wrap, add:

margin-left: -20px;
margin-right: -20px;

The negative margin pulls the nav-wrap all the way to the edge and balances out the 20 pixel body padding. We also want to add 20 pixels of left and right padding inside the .nav-wrap, since the negative margins negate the body padding.

The final version of the code should look like this:

/* 
  Adds background color to navigation area.
  Negative margin pull background color to the edge.
  Padding balances out the negative margin.
*/
.nav-wrap {
    background-color: #272727;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

Save and refresh your browser. The site should now look like this:

Now we’re getting somewhere! Next, let’s tackle the invisible navigation.

Changing the Navigation Color #

In the out-of-the-box version of Go Mobile First, navigation element colors are controlled by the muted class. Open header.php and remove muted from all nav elements.

<ul class="nav muted responsive-nav"> becomes <ul class="nav responsive-nav">. <ul class="nav muted"> becomes <ul class="nav">.

Save and refresh your browser.

As you can see, the nav elements are now the default link blue, and black on hover. We’re getting there, but it’s still not quite right.

We want the navigation links to be white, both when inactive and on hover. In style.css, after:

/* Styling for nav elements that are links */
.nav > li > a { 
 	float: none; 
	/* Add padding between elements */
	padding: 10px 10px 11px; 
}

Add:

/* Overrides default link color for nav elements */
.nav > li > a, 
.nav > li > a:hover {
    color: #ffffff;
}

Save and refresh your browser.

You can see they’re now white, with the default underline on hover. Now let’s remove the navigation border.

Removing the Navigation Border #

Back in style.css, find .nav and delete:

/* Add gray lines above and below list */
border-top: 1px solid #e5e5e5; 
border-bottom: 1px solid #e5e5e5;

In the default Go Mobile First themes, we remove the border from the collapsed navigation on smaller screens. Since that border no longer exists, we don’t need to remove it for smaller screens.

Scroll down to the media queries section, and under @media (max-width: 680px) delete:

/* Remove the border elements from the nav menu */
.js .nav-mobile > .nav { 
    border: none; 
}

Save and refresh your browser.

Looking much better. Of course, the logo is still invisible. Let’s fix that next.

Changing the Logo Color #

In style.css, find .logo:hover. This controls the behavior for the logo link. Right now it’s just adjusting the logo on hover state, so we need to add .logo, before it. Your code should look like this:

/* Overrides default link behavior for logo text. */
.logo,
.logo:hover { 
	color: #272727; 
	text-decoration: none; 
}

We don’t actually want the color to be black. We want it to be white. Replace #272727 with #ffffff. Your code should now look like this:

/* Overrides default link behavior for logo text. */
.logo,
.logo:hover { 
	color: #ffffff; 
	text-decoration: none; 
}

Save and refresh your browser.

Much better! One thing I noticed, though. The gap between the site description and the navigation seems a bit big. Let’s decrease it.

Closing the Gap #

In header.php, find this bit of code:

<!-- Description of site with lightened text and bottom margin. -->
<p class="muted">
    <?php bloginfo( 'description' ); // Insert site description ?>
</p>

We want to add the no-space-bottom class to the paragraph element. As its name implies, this class sets the bottom margin and bottom padding of an HTML element to zero.

Your new code should look like this:

<!-- Description of site with lightened text and bottom margin. -->
<p class="muted no-space-bottom">
    <?php bloginfo( 'description' ); // Insert site description ?>
</p>

Save and refresh your browser. The site should now look like this.

One last thing. The spacing below the navigation looks a bit tight now that there’s a background color. Let’s add a little breathing room.

Adding a Little Padding #

In style.css, go to .nav-wrap, and add padding-bottom: 14px;.

Why 14 pixels? That’s one of the numbers in our typographic scale, and it’s used for spacing throughout this theme’s design.

Your final code should look like this:

/* 
  Adds background color to navigation area.
  Negative margin pull background color to the edge.
  Padding balances out the negative margin.
*/
.nav-wrap {
    background-color: #272727;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 14px;
}

Save and refresh your browser. This is the finished product.

Wrapping Up #

You’ve just added a colored background to the Go Mobile First theme. Nice work!

To move these updates to your live site, upload the modified theme to your web server (if you use WordPress’s built-in theme uploader, you’ll need to zip the file first) and activate it.

If you got stuck anywhere along the way, you can download the files from this tutorial on GitHub.

  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests