• Skip to main content
Jennifer Andrew

Jennifer Andrew

scalloped circle buttonemail me!

5 Creative Ways to Customize Your Navigation Menu

07/14/2014 by Jennifer 4 Comments

There are so many navigation menus that I absolutely love over here in Blogland. It’s a small part of a blog, but also one of the most important elements. There are a trillion options when it comes to customizing the ol’ navbar. These are a few neat ideas if you feel like fancying up (or fancying down) your navigation menu.

customize-nav-bar

1. Make Your Navigation Menu Stick to the Top
Having sticky blog elements is all the rage right now and I’m all about it. When your navigation menu scrolls with the page, it keeps your readers focused on what categories you have to offer. I love the clean floating navigation bar on Honestly WTF. If you are a WordPress user, there are a several handy plugins that will help you create your sticky navigation bar. I currently use this plugin. If you’re a Blogger user, try following this tutorial.

navbar-sticky

2. Use Hover Effects
Going overboard on hover effects can be distracting, but I also get distracted when there aren’t any hover effects at all! The hover effect says, “Hey! This is a link. Click it.” I think it’s nice to at least have one tiny effect even if it’s just a slight color change.  I’m a big fan of the pretty design over on The Nectar Collective. Learn how to style your links with easy CSS codes here.

navbar-hover
3. Add Hand Drawn Elements
Using hand drawn elements in your header and/or navigation bar will give your blog that crafty DIY feel and make it more fitting to your unique style. Madalynne’s blog design is so dang cute. There are just enough doodles to keep the layout clean and the hand drawn elements are entirely relevant to her craft. With a little help from a tablet and some CSS coding, you can easily add crafty handmade drawings to your navigation menu. Alternatively, you can design your blog on Photoshop or a similar program and hand it over to a web developer to add all the magic codes.

navbar-doodles
4. Include a Drop Down Menu
Drop down menus are perfect for when you have such an abundance of categories, you can’t possibly fit them all neatly into a menu. If you have several topics, a good way to organize them is to choose 4-5 main categories. Then file your smaller categories into the larger ones. For example, on my blog I have many features related to style: dress up, window shopping, fictional style, gift guides, beauty, etc. Rather than listing all of these, I would file them under the broad category “style”. Here is a straightforward guide to drop down menus that even shows you how to customize your menu using CSS.

navbar-dropdown
5. Keep it Simple
Sometimes less is definitely more. Fancy navigation menus are fun, but keeping things minimal creates an completely different vibe on your blog. Bekuh Browning’s site is designed so well. Her navigation bar is simple and to-the-point, yet I still want to click every button and read on forever.

navbar-minimal

 

Admiring any navigation bars (or blog designs) these days? I’d love to see them!

Filed Under: blog design, css, design

Reader Interactions

Comments

  1. Noor says

    07/15/2014 at 2:08 am

    I am a huge fan of hover effects and drop down menus. I actually use those on all my designs. Great post I love it :)

    Reply
    • Jennifer @ Earl Grey Blog says

      07/21/2014 at 12:26 pm

      Thanks Noor! So glad you like it. :)

      Reply
  2. Katie Holman says

    08/03/2014 at 11:27 pm

    Big fan of the tutorials lately! I’m always a little surprised when people divulge their trade secrets, you know? But it’s so great. Thanks for sharing! I may not have anything juicy content-wise for my tiny blog yet but at least I’m having so much fun plodding away in CSS, haha.

    (Also loving the navigation bar at http://www.creativeindexblog.com/
    Both the top menu and side category menu are killer.)

    Reply
    • Jennifer | Earl Grey Blog says

      08/05/2014 at 2:05 pm

      Haha I know what you mean about the trade secrets. I just think some things are so fun (and easy), it would be a shame not to share. Glad you are liking the tutorials! Also, just hopped over to your blog – it’s so pretty!! And I absolutely love the simple, clean design over at Creative Index. :)

      Reply

Leave a Reply Cancel reply

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

get in touch