How To #005 – Design Your Own Navigation Bar - Radiant

The Radiant Blog

If you have ever considered wanting to use something other than a solid colored bar for your main navigation this post will take you through the process (a very simple one) of how to achieve that. For this post we are going to use the template “School Is In” as our example.

  1. Design your site however you see fit in Photoshop or whatever other graphic application you may have access to.
  2. Save out your background image and upload to your file manager in AM.
  3. Set up your site defining the space for the banner, location of nav, page title and banner and all the padding associated with those elements (see details below).
  4. For the navigation itself, under the navigation tab you will want to erase all the numbers in the field that define the menu background color, leaving it blank.
  5. When you save and then preview your site, you should see your navigation words without a solid color rectangle behind it.

In the sample site you can see that I designed the navigation bar to be thicker and it contains thin vertical lines. For this to work my specs are:

Admin Screenshot 1

1. Banner height on the homepage is = 406 pixels with padding of 50 pixels above and below the banner.

Admin Screenshot 2

2. The title header is contained within the main banner image and a padding above of 50 pixels and 60 pixels to the left. This is so the words are away from the edges of the blackboard.

Admin Screenshot 3

3. Lastly there are 8 pixels of padding above the banner and 15 pixels below. As stated, the Menu Background Color is blanked out.

Now this is just a list of all the variables and settings I needed to consider for my particular design. For what you design your numbers and variables will be different. The trick is just setting all the numbers/elements of the AM backend so that they will align with your graphics from your design. It's really simple. You can check out all the specs for yourself by going to the “choose my template” section in your admin panel and looking through tabs of the design section for the template titled “School Is In”. If you have any questions for me, please ask in the comment section.