You are here

Theming: creating fixed transparent top menu

You may or may not have noticed that my blog's top header (which includes the main menu, logo and search box) has gotten a COMPLETE make over.  I wanted to make my header

  • fixed (it stays in place and is always accessible even as you scroll down to read my blog posts) and
  • slightly transparent, so you visually notice that it's following you around with the scroll

This post is about how to implement a similar header bar.

Edit template file

Edit your page's template file (.tpl.php file) to group your navigation, logo image, site slogan and whatever else you want to place together in a special div.  In my case, I create a div with an id of 'top-nav-banner': 

<div id="top-nav-banner">
   <div class="l-branding">
  <?php if ($logo): ?>
    <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" class="site-logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
  <?php endif; ?>
  <?php if ($site_slogan): ?> 
      <h2 class="site-slogan"><?php print $site_slogan; ?></h2>
  <?php endif; ?>
   </div>
 
   <?php print render($page['navigation']); ?>
</div>

Customize header div

Here is the code that styles that containing div. 

header #top-nav-banner {
  position: fixed;
  width: 100%;
  top: 10px;
  left: 0px;
  background-color:rgba(240,240,240,0.9);
  z-index: 5;
  border-bottom: 1px solid #DDDDDD;  
  height: 100px;  
}

Notes:

  • The position is fixed, which is almost like absolute positioning, except that elements with this type of positioning maintain their location even when you scroll. 
  • The background-color is set to be a light gray at 90% opacity (note the last argument of 0.9 in the rgba())
  • I set the z-index of the element to 5 (something greater than 1), to make sure the header will be displayed ABOVE the other page elements as it scrolls over them.  If you don't do this, you'll notice the header following you around as you scroll, but you'll notice it scrolling BEHIND the other elements.  The z-index determines the order in which elements are displayed, and the higher the number, the more forward they are brought in the stack.

Customize the containing elements

I won't paste in all the css for the containing elements, like the navigation, the search box, etc, but you now need to give those a position of 'fixed' as well and a top/left position that aligns them both attractively and in a way that works with both wide and narrow screens.  Here is a snippet of the css associated with my navigation:

.l-region--navigation nav {
  position: fixed;
  top: 10px;
  left: 240px;  
}

Final product

You can see how the header remains at the top of the page, even as I scroll and the post scrolls behind it.  You can see the effect, since I've made the header partially transparent (90% opacity).

That's it!  I hope the above gets you started - customize as you wish for your personal scenario.

Check out my next tutorial on making the main menu responsive.

Share

Comments

Hi,
I got the logo etc. to work fine in my transparent header but couldn't display the main menu items. Can you post how you displayed your menu? Thanks.

Hey,

The part that says '<?php print render($page['navigation']); ?>' is the one that outputs my menu.  However, depending on which of your menus you're trying to print out (you may have a custom one), go to your menus page at admin/structure/menu and hover over one of the admin links for that menu to see the computer name for it.  Make sure you substitute 'navigation' with the computer name of the menu you want to output there.

Hope it works!

Boriana

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.