Dynamic Mastheads in CE4

In case you’ve been wondering about how to employ dynamic mastheads inĀ  CE4 based sites, wonder no more.

First, what’s a dynamic masthead? It’s a masthead that will adjust to the size of the browser width so that it looks good no matter the device.

If you use a graphic logo for your masthead, when you shrink the browser size down or if you view your site on a smart phone, you’ll see that your beautiful logo that you spent lots of time (or lots of money) on, is now teeny, tiny version of its glorious self and any text you’ve included in the logo is so small that you have to put your iPhone under a magnifying glass.

desktop version of graphic logo
desktop version of graphic logo

The solution is to serve up different logos for different devices using custom css and media queries. For example, you’d send a logo with text in a larger font to mobile devices.

But Matt has already explained the entire process in great detail in his Dynamic Masthead tutorial. The tutorial at the link is for the CE3 versions of the TTG plug-ins. A few things have changed in CE4, but not so much that the tutorial can’t be modified to work for CE4. In fact, there’s only one small change that needs to be made.

In the tutorial, Matt uses this selector to place the masthead: html .logo. This targets the .logo class.

But CE4 doesn’t include the .logo class. So instead you can use this: html #masthead .mantle h1 wherever you see .logo in the tutorial.

Mobile version of graphic logo
Mobile version of graphic logo

You can then tweak the css to your liking. For instance, the tutorial contains the rule: background-position: center center; to center your logo in the container. For the design I’m working on, the graphic logo looks better when it’s placed at the top of the container. So I changed this rule to :
background-position: center top;

I also adjusted some the media queries to fine tune when which version of the logo was served to certain device widths.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.5
WordPress Add-on 1.2.5
Publisher 3.2.3

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.10
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts