Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 5 – Configuring Navigation

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we demonstrate how to configure the Navigation Menus of the Bee Crafty child theme for Genesis. Bee Crafty has some built in menu styles that can be applied to social networking links.  We discuss how to create the social links menu as well as other menu options.

The next big thing to configure is your navigation. We started off configuring navigation because I wanted to have something up here, but there’s quite a bit of navigation related choices in this theme.

Two Kinds of Navigation

There really are two kinds of navigation that are set up for this. There is the primary navigation which is what this is right here and then there is the secondary navigation which is configured in this case as social networking buttons.

Setup and Configure the Primary Navigation

What we’re going to do is configure ours similar to this. We’re going to start that off in Theme Settings by making sure that we include the primary navigation menu and for the moment, that’s all we’re going to talk about.

Then we’re going to come over to Appearance and Menus. If you haven’t done it already, you want to decide which menu you’re going to use as your primary navigation menu and then select it here. I currently have two menus created so I could select category and hit save and that would change this menu up quite a bit. It would change the menu. I’m going to say main menu and save.

Home Button Link

Notice how they’ve got this little home button link here. That little home button link is created specially. And the way to accomplish that is to come over to custom links and in the custom links, paste the URL to your homepage there and call it home, add it to the menu, drag it up here, hit save and refresh it. And now, your home menu has a little home. You have to actually create a custom link in order to make that work.

Fancy Drop Downs

There are some other settings that you can set here and if we come back over to Theme Settings and scroll back down, you can enable the fancy drop downs which just means it’s giving it a little bit of javascript when it drops down like this.

Enable Extras

You can also enable extras on the right side. These give you a choice of things. For example, if you put today’s date on there and hit Save Settings, come back over and refresh it, the date shows up here over on the right. You could also, instead of today’s date, have an RSS feed link and now you’ve got RSS for posts and RSS for comments.

You could also instead put the search form in and then your final option is the Twitter link. And again, put your Twitter id in and then some link text, save, refresh and that. But I’m going to put search in there. And that’s pretty much all there is to configure for the primary navigation.

Setup and Configure the Secondary Navigation

The next choice you have is secondary navigation. In order for the secondary navigation to work, you do have to scroll down here to navigation and say include secondary navigation. We’ll go ahead and include fancy drop downs for a moment and hit save.

Let’s come over and refresh this. There is no menu here because we haven’t assigned a menu to the secondary location yet. So if we come back over to our Appearance and Menus and look at our category menu, we can assign the category menu. Refresh it and now we have a secondary menu here that’s set up.

Now notice that this has a background image that is different than the header image now. So when we get to the end of this session, I’m going to show you how to create a background image that you could use there instead of this one and how to replace this background image with that.

Secondary Menu with Social Networking Links

This is just a regular menu, right? You can use just a regular menu or you can have one of these social networking menus. If we come back over and create a new one, I’m just going to call it social networking. Create the social networking menu and then we’ll just create a new menu item using custom links.

For example, come over here to my Facebook page, copy that one and say Facebook. Add to menu and then we’ll come over to Twitter and copy that one, add it to menu. Let’s go over to LinkedIn. Let’s see, so how do I get back to my profile? Okay, there it is. Copy link address, let’s see LinkedIn and then one more. And I’m just going to add YouTube to the menu.

Let’s save this menu and then come over here to the secondary menu and choose the social networking menu instead. Hit save, come over and refresh and now I’ve got Facebook, Twitter, LinkedIn and YouTube.

Add Classes to Menu Items

You notice though that these do not look like these. And so we have one more step that we have to go to and that step is to add a class to these. Now these classes are already built in to Bee Crafty and the way you add your class to each of your menu items is to go over here to Screen Options, come over to CSS classes and put a check mark there. And then come back up and then what you can do is add that class.

The way the class is constructed is it starts off with menu and then hyphen and then the name of the social networking site so in this case, it’s Facebook. Then this is menu-twitter. This one is menu-linkedin and this one is menu-youtube.

Now when we save it, it’s going to look different. Come over and refresh this and now you’ve got Facebook, Twitter, LinkedIn and YouTube. And if you click on that, it’s going to take you to the YouTube page or it’s going to take you to the LinkedIn page or the Twitter page.

You could in fact, add another custom link here. Call it pound sign and then in the label, I’m going to say strong and then “connect with me” and then add that to the menu. Save the menu. Refresh it and now you’ve got a little label here. It says ‘Connect with me’. Now if you click on it, it doesn’t take you anywhere but it does sort of announced to people you know, that this is a place to connect up. So that’s something that you can consider doing here.

This system has icons for Facebook, Flickr, LinkedIn, Picasa, RSS, Skype, Twitter, WordPress, Yelp, and Youtube. So it only has those 10. It surprises me that for a child theme like this that they don’t, at the very least, have Pinterest. But at the end of the class here, I’m going to show you how to create the same kind of a thing for Pinterest and for Google + so that you can add those things in as well.

I think you want to include Pinterest, at the very least, for any kind of a site that is image-intensive, especially for a crafty kind of site. And there may be others that you want to include and you can follow the system here for creating the other ones as well. But we’ll do that at the end of the class. It’s more of an advanced thing.

0 Comments… add one
0 comments… add one

Leave a Comment