TTG Masthead and Navigation Options

There are several options in both the Masthead and Navigation areas that might cause some confusion. Options like "orphan" and "drop."
The Social Media Profile area also has an option of placing the icons in the Masthead, either at the top or bottom and aligned to the left or right.
Let's take a look at these.

Social Media Profiles in the Masthead

The two options for placing Social Media Profile icons in the Masthead are Masthead Top and Masthead Bottom. You can also float them left or right.

When you do this, the background-color you set for the icons gets dropped and the icons are placed as-is in the "masthead" div element, positioned either at the top or bottom of the element depending on your choice.

But something interesting can happen if you have any top or bottom margin set in the Masthead. And it's easiest just to illustrate it.

TTG social profiles in masthead with bottom-margin
Margin-bottom is set to 24px in the Masthead.
Masthead margin settings.
Masthead margin settings.

Here, the Social Media Profiles are placed in Masthead Bottom and a bottom margin of 24px is being used in the Masthead. You can see that the Social Media Profiles "drop" beneath the masthead area. In reality, they're just stuck to the bottom of the "masthead" div element.

This can be an effective design choice, but it may not be what you want or expect.

If you want the Social Media Profiles to be "in" the Masthead, be sure to set either margin-top or margin-bottom to zero in the Masthead controls, depending on where you're putting the icons.

ttg social profiles in masthead with margin set to zero
Masthead margin-bottom set to zero.

Drop that Masthead!

You can place the Navigation above the Masthead if you wish (just like I've done with the TTG-Tips site). This is done by "dropping" the Masthead. It's very simple to do, just check one box.

TTG Masthead placement controls
Just check the Drop box to place the Masthead below the navigations

You might notice that I've also disabled the "spurs" and eliminated the borders in the navigation for this demo page. I think it just looks cleaner this way.

TTG page with Navigation above Masthead
"Drop" Masthead option used to place navigation at the top of the page.

The "Orphan" settings

The "Orphan" settings in both the Masthead and Navigation areas will remove those areas from the Page Container. By doing this you can have those elements span the entire width of the browser while containing the rest of the page to a narrower width.

Here the Navigation is "orphaned" while the Masthead is "dropped" but not "orphaned."

TTG page with nav on top and orphaned
Navigation "orphaned"

Here both Navigation and the Masthead are "orphaned" and Masthead is still "dropped."

ttg page with both masthead and navigation "orphaned"
Both Navigation and Masthead "orphaned."

To keep the Masthead and Navigation items in line with the rest of the page while having their backgrounds span the entire width of the browser, be sure to set the Mantle to "auto" and the Core to a fixed width.

Settings used for the Masthead

ttg masthead orphan settings

Settings used for the Navigation.

ttg navigation orphan settings

And one more variation

So what happens when you place the Social Media Profile icons in a Masthead that's been orphaned?
Below I've set the Masthead to "orphan" and the Mantle Width to auto. See what happens:

ttg page with social profiles in orphaned masthead
Social Media Profiles in an "orphaned" masthead.

Again, this could be an interesting design choice.

Be sure to try all of the options out for yourself. There's nothing like experimenting to see all the possibilities TTG has to offer.

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.2 release 3
Pages module 1.2.1
Cart Add-on 4.1.3
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

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

Subscribe to new posts