Blog Tips / Blogging Actually / DIY & Tutorials

How To: Drop-down List On Your Navigation Bar

SJB's Menu Setup

This post was a special request by one of the GiG members – Brittany from Creativity Arise. And since I’ve not done any ‘how to’ post for ages, I thought of whipping this one up.  To be honest, Movember was pretty hectic and December just basically oomph it up a notch, so apologies if my posts become sporadic at times.
Just like most of you, I, too, asked myself once, in terms of how to organise the Pages/Categories I’ve created and make them look nice and neat. It might seem like a task at first to utilise the Menus feature on WordPress.com, but once you get to know it a little bit more, you’ll be perfecting a cascading effect on your Nav Bar, to make your readers browsing experience easier!
Let’s get started.
  • Simply go to your Dashboard.
  • Scroll down and find Appearance – click, and then Menus
Now a few themes like mine —Sight Theme —  offer primary and secondary Nav bar (see above pic),  while others, only allow you to create one.

1. Custom Links, Pages, Categories – can be on the Menu
Any of these can be added to the Menu, of which will appear accordingly on your Nav Bar.

Pages, Custom, Categories2. Positioning the pages, custom links or categories in your menus — dragging, and aligning.

CascadingMenuEffect

  • In essence, you can put as much categories or pages under each parent category (i.e. Well-Loved Brand Shops), while clicking the arrow button , will allow you to rename or label this page differently.
  • **Custom Links — being able to add a link to the menu is very handy, take my Well-Loved Brand/Shops for instance, if you click Leor, this will redirect you to my recent post about them. This is done by adding the link of this post to the Menu.
As for this beauty bean blog, I decided to categorise my Nav Bar/ Second Menu accordingly, separating About, Contact and Disclosure Policy (of which I still need to fill!) from the main Nav Bar.

How my Secondary Menu looks like…

Second Menu

Please click Image above to see full version. This is my Second Menu setup.

3. Make sure to Save your Menu once you’ve got everything line up and you feel happy with the setup. You can always preview this and go back to make changes.

Cool tip when you have a Menu setup: Any Page you’ve published not on the Menu, will not appear on your Nav Bar.
Example, click Translation icon Free Translation Widget on my sidebar, and this will take you to my Translation Page, which is nowhere to be seen on any of the navigation bars. I didn’t feel that it was necessary to have the Translation Page visible, so I hidden it and you’d only see it when the icon for Translation is clicked.
Don’t forget, you can also use your sidebar to show your Categories,  you just need to put some organisation into your posts so it’s more manageable.

There you have it, the simplest way of tidying up your blog, while making sure that you’re giving your readers a good impression when perusing your blog content, minus the hassle!

Any question a please feel free to ask! 🙂

Advertisements

24 thoughts on “How To: Drop-down List On Your Navigation Bar

  1. Thank you so much for this post hon, you know many of us are newbies here and need all the technical help we can get. Will do some updates on my blog soon too 🙂

  2. HI!! Thank you so much for this!! I’ve been trying to figure out for a long time, how to add the menu bars at the top.

    I do have one question that I hope you can help me with. How did you add your contact form to the secondary menu? My contact form is currently in my sidebar, but I don’t know how to move it.

    Here’s my blog if you need to take a look. bellezakisses.wordpress.com

  3. Pingback: Best of blog posts – autumn & winter edition « Beauty expression by Luchessa

Now, your turn. This space is all yours!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s