A little backstory
I little while ago I was asked by a client to set up a website using a parallax WordPress theme. They had already started using the OneEngine theme but there were still many things that needed to be sorted out. Proper documentation for the theme is severely lacking so you have to feel your way around it. Despite it being a really nice responsive theme, one of its biggest issues in terms of branding is that the logo you place in your header does not scale.
I looked around forums for a solution to this but it seems nobody had addressed it yet so I gave it a shot. With just a few modifications to a couple of source files and a bit of custom CSS, I had an adaptive logo that wouldn’t bleed past the header or be obscured by the menu items.
Step 1: Different logos for different screens
I didn’t want to simply scale down the logo I had. In my case, I wanted to feature a full logo showing the brand name with a tagline on the header menu when seen on a computer, and only feature the brand’s name when viewed on a mobile device. This meant that I needed to set two images for the logo in the Theme Options.
In order to create an additional logo option in the Theme Options -> General settings you have to edit the admin-config.php file. This is found under /wp-content/themes/oneengine/plugins/admin-core/admin-config.php.
Go to line 177 (or find the string “custom_logo”) and make a copy of that array just under it. Change the id, title, and subtitle to something like the image below. Save the file and replace it back on your WordPress server.
Once you go back to Theme Options -> General in your WordPress, you’ll find another section where you can upload a logo for mobile devices.
Step 2: How to switch the images
To let the browser know when to use each image, we’ll need to create an additional image element referencing the new mobile logo. Normally, this would require some nifty CSS trickery but since OneEngine already uses the Twitter Bootstrap we can just assign some simple classes to each image element.
In your WordPress admin console go to Appearance -> Editor and select the header.php file. Look for the block that has the following line of code:
echo '<div class="logo-wrapper" style="'.$width.$left.$top.'"><img src="'. oneengine_option('custom_logo', false, 'url') .'" alt="'.get_bloginfo( 'name' ).'" /></div>';
Replace it with the following lines:
echo '<div class="logo-wrapper hidden-sm hidden-xs" style="'.$width.$left.$top.'"><img src="'. oneengine_option('custom_logo', false, 'url') .'" alt="'.get_bloginfo( 'name' ).'" /></div>'; echo '<div class="logo-wrapper visible-sm visible-xs" style="top: 15px;"><img src="'. oneengine_option('custom_logo_small', false, 'url') .'" alt="'.get_bloginfo( 'name' ).'" /></div>';
What we’re doing here is assigning the first logo container (the big one) the hidden-sm and hidden-xs classes. This tells the browser to hide that block when the width of the browser is under 992 pixels. At the same time we create a secondary logo container that shows the custom_logo_small option that we added to the Theme Options. This container is configured to appear only when the browser width drops below 992 pixels by using the visible-sm and visible-xs classes.
Step 3: Go take a look at your adaptive header logo!
That’s it. You can now go see your adaptive header in action.
Using the same methods listed above you can set additional logo containers for other sizes in case you need to define more specific resolutions.
If you have any questions about the fix applied here please let me know in the comments and I’ll get back to you.