Add a logo to the sticky menu of Cafe Pro

A member of the Studiopress forum asked how to show a logo in the after header menu (primary navigation) of Cafe Pro when scrolling down the page.

In Cafe Pro, the menu underneath the big hero image becomes sticky when you scroll past it and displays the site title (linked to the home page).
 

How does Cafe Pro do that?

It uses a combination of jQuery, PHP and CSS.

If you take a look at the js folder in Cafe Pro, you find the file home.js. This file sets up calculations about the window height and at a certain point, adds the CSS class fixed
to the primary navigation.

The CSS in style.css includes this class and makes the primary navigation fixed, which means it will stay at the top of the browser screen.

This just explains how the menu becomes sticky and when it becomes “un-stuck”.

The site title and link to the homepage are added through filtering the navigation items in functions.php.

// Surrounding code not shown.

$output = sprintf( '<li class="small-site-title"><a href="%s">%s</a></li>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

You might think this is all nice and good but how do we get an image in place?

How to replace the site-title with an image logo in Cafe Pro

I will go through the process step-by-step.
If you just want the code to make the changes to Cafe Pro, you can find it in the Recap at the end of the tutorial.

If you take a closer look at the last code snippet, you see the following:

<a href="%s">%s</a>

There is a link. It links to a placeholder (%s) and adds link text defined by another placeholder.
The first placeholder is trailingslashit( home_url() ).
This is PHPs way of defining the link to the homepage.

The second place holder is get_bloginfo( 'name' ).
This is PHPs way of getting the name of the website.

I still want the logo to link to the homepage, so I won’t change the first placeholder.

But we want to show a logo instead of the site title.

Instead of that second placeholder, let’s add an image.

// Surrounding code not shown.

$output = sprintf( '<li class="small-site-title"><a href="%s"><img src="/wp-content/uploads/2016/09/ch-Logo.jpg" alt="site-logo" /></a></li>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

 
Let’s see how that looks:

 
Good news is that we got the logo in there, but it is huge and the styling is off.

We have to take a look at the CSS with the Developer / Inspector tools of the browser and make changes to the style sheet.

But first, let’s talk about the size of the logo.

The dimensions of the logo in the example are way too big.
I did the measurements and the height of the logo should be 74px for the navigation menu in the example.

I would recommend to upload a logo that is twice that height to make it look good on retina displays and to use CSS to set the width to the single value.

What does that mean?
In the example I´m using a square logo. Height and width are the same.
Uploading a logo twice the size would be 74px * 2 = 148px.
In the CSS, I would set the width for the logo to 74px.
(I´m not setting the height, because Cafe Pro’s style.css is already setting the height to automatically adjust to the width)

I opened the developer tools of my browser and found that the following css selector changes the width of the logo:

.nav-primary .wrap .small-site-title a img {
    width: 74px;
}

 
This results in:

The size of the logo looks good, but the black padding around it does not.

I don’t want to change the padding for the navigation menu.
I just want to change it for the logo.
Let’s get rid of that.

Around line 1291 of the the style.css, you will find

.nav-primary .wrap .small-site-title a,
.nav-primary .wrap .small-site-title a:hover {
    color: #fff;
}

Change it to:

.nav-primary .wrap .small-site-title a,
.nav-primary .wrap .small-site-title a:hover {
    color: #fff;
    padding: 0;
}

It´s starting to look really good:

But wait… what´s that black line underneath the logo?

That´s a border-bottom set to show at the bottom of links…
Remember, our logo image is shown inside of a link.

Fortunately, there is an easy fix for that and we can even utilize the CSS selector I created for the width of the logo.

.nav-primary .wrap .small-site-title a img {
    width: 74px;
    vertical-align: top;
}

 
And the end result looks like this:
 

Recap on how to change the site title to an image logo in the sticky menu of Cafe Pro

Let’s go over all the necessary changes:

In functions.php, find the following line:

// Surrounding code not shown.

$output = sprintf( '<li class="small-site-title"><a href="%s">%s</a></li>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

and change it to

// Surrounding code not shown.

$output = sprintf( '<li class="small-site-title"><a href="%s"><img src="/wp-content/uploads/2016/09/ch-Logo.jpg" alt="site-logo" /></a></li>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

Please remember, you have to change the path to where your image is located.

In style.css, find the following selector around line 1291

.nav-primary .wrap .small-site-title a,
.nav-primary .wrap .small-site-title a:hover {
    color: #fff;
}

and replace it with:

.nav-primary .wrap .small-site-title a,
.nav-primary .wrap .small-site-title a:hover {
    color: #fff;
    padding: 0;
}

.nav-primary .wrap .small-site-title a img {
  width: 74px;
  vertical-align: top;

}