Fixed navigation bar position in your TTG site

NOTE: this tip only works if you’re not using Cart or the Client Response Gallery

 

When you scroll down a page, the navigation bar in your TTG site will scroll up and out of view. Want to keep it at the top?

If you don’t already have your navigation bar placed at the top of the page, it doesn’t matter. The CSS code below will do that for you.

Your site may look different online than it will in Lightroom so if you want the view in Lightroom to match your site, you can place your nav bar at the top. Just check “Drop” in the Site Info > Masthead section of all TTG plug-ins.

If you wish the navigation bar to span the width of the browser, you’ll also need to check the “orphan” box in the Navigation section. For more on Header and Navigation options, see my post on masthead and navigation options.

To use the code below you’ll first need to enable phplugins site-wide and enable custom CSS within the phplugins.php file.

What we’re going to do is to change the position property value for the navigation to “fixed”. This will take the navigation container out of the normal document flow and keep it where we place it. But when the navigation is taken out of the normal document flow, the rest of the page will move up. When this happens, your masthead will be partially hidden beneath the navigation.

The way to fix this is to add some top padding to the masthead. The amount of top-padding is determined by the height of the navigation container.

The easiest way to find this height is to use your browser’s inspector. Once you’ve got the inspector up, click on the div element with the id of “navigation-container” and you should be able to read the height of the container directly in the browser.

html for navigation bar div
Use your browser’s inspector to choose the navigation-container div
mathead and navigation bar
see the element’s height in the browser

You can also go into Lightroom and add up all the numbers that contribute to the height of the Navigation container:

In Site Info > Navigation Container:

  • Margin top and bottom
  • Padding top and bottom
  • Border top and bottom

In Site Info > Navigation Items:

  • Font-size
  • Padding top and bottom
  • Border top and bottom

Add this code to your custom.css file:

/*Navigation styling
================================================*/
/*Fix position of nav bar */
.navigation-container {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
.masthead {
padding-top: 41px; /*set as needed for height of your navigation bar*/
}

Depending on your own particular set up, you may need to tweak some of the css. But this should get you started. I’ve not tested this on all masthead/navigation possibilities, but since it deals only with the navigation container, I’m pretty sure this should work for any navigation set up that has the nav bar with the masthead.

3 thoughts on “Fixed navigation bar position in your TTG site”

    1. OH fine, Daniel. Go and spoil things 🙂
      Looks like it doesn’t work. I just checked on my main site. and put something in the cart. Navigation gets hidden. Hmm.
      I suppose it’s going to be necessary to change the css on the status bar too. Same with the CRG status bar

      So anyone wanting to do this: it doesn’t quite work out so well if you’re using the Cart or CRG.

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
Pages module 1.2.1
Cart Add-on 4.1.3
Client Response Add-on 7.1.2
Theater Add-on 1.2.1
WordPress Add-on 1.2.1
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