Main Menu as a Vertical Navigation?

[k_b]

Hi Jason,

Thanks so much for providing this fantastic framework!

I’m sure others would be interested in this also but I was wondering if it would be possible to change the main menu into a vertical navigation? I’m presuming I would need to work with Action Hooks but not sure where to start with this.

Would you be able to help or even better provide a tutorial on this?

Thanks

Topic

[Jason Bobich]

Hello,

I apologize, but this is a tough question to answer, as it’s extremely broad in the sense that are just so many ways you could accomplish this, and it’s all going to depend on your specific design. It’s going to be involve a combination of where you hook your content and how you structure your CSS to meet your specific needs.

Hopefully, in the future we can provide some Child themes for sale that provide different structural starting points that people can use to build from.

[k_b]

Hi Jason,

Thanks for coming back to me. I appreciate the question is broad. This may help: I have a static site that I need to move over to a WordPress drive site, see: http://www.osteria-no1.co.uk/menu.htm

You will see that the design is straightforward with a left hand sldebar vertical nav. Is there an easy way to achieve this?

From a personal point of view. I’m sure I’m not the only person who hasn’t had any experience with action hooks. I’m sure lots of people would benefit with a video tutorial of the basics. Would that be possible? One of the big selling points for me in buying your theme was on the really helpful video tutorials that you have done already, these are a great resource for folks starting out.

Extra Child Themes that provided different starting points would be amazing.

Thanks!

[Jason Bobich]

Have you read this article? — http://dev.themeblvd.com/tutorial/actions/

What is it that you don’t understand about action hooks?

You essentially just take whatever your function is and add it to the to action hook name with WordPress’s add_action function.

function my_whatever(){
       // do something...
}
add_action( 'themeblvd_whatever', 'my_whatever' );

http://dev.themeblvd.com/tutorial/the-wordpress-functions-you-need-to-know/

[k_b]

Yeah I read through it but didn’t really get it to be honest sorry!

I can see in the Action Map that the default menu function is: themeblvd_header_content_default

What I’m not sure about is how to remove this and then place it in the correct location in my Child Theme so that I can achieve my desired layout.

[Jason Bobich]

Actually working with the hooks is fairly simple. You just make use of remove_action and add_action.

So, you’d remove the themeblvd_header_content_default function from the themeblvd_header_content action hook:

remove_action( 'themeblvd_header_content', 'themeblvd_header_content_default' );

And then you’d add the function to the action hook that you want.

add_action( 'themeblvd_whatever', 'themeblvd_header_content_default' );

Or create your own function that displays what you want and hook it on:

function my_whatever(){
       // do something...
}
add_action( 'themeblvd_whatever', 'my_whatever' );

But then simply moving this function to somewhere else is then going to require a lot of CSS changes.

Why not just remove the header content all together and then just put your Logo and Menu in the left sidebar with widgets? You could use a text widget with some HTML in it for the logo to just display an image. Then, you could use the “Custom Menu” widget to display a menu.

This is actually kind of what I did on this site, which is a Child theme of Jump Start. I set the site to have the Left Sidebar sidebar layout. I unhooked everything in the header. I hooked the themeblvd_header_logo_default function to the top of the sidebar. Then I added the custom menu widget to the Left Sidebar itself from Appearance > Widgets.

[Jason Bobich]

Note: If it wasn’t clear, whenever I reference any of these kind of code customizations, I’m referring to putting them in the functions.php of your Child theme.

[k_b]

Many thanks for the support.

I have add your code to my functions.php file in my Child theme and the header content is remove. The navigation is now placed at the very top of the page, I thought that it would have been removed also?
Code used: remove_action( ‘themeblvd_header_content’, ‘themeblvd_header_content_default’ );

I also attempted to place the themeblvd_header_logo above the left sidebar by using the following code:
add_action( ‘themeblvd_header_logo’, ‘themeblvd_fixed_sidebar_before_default’ );

but this didn’t work. Is my code wrong?

[Jason Bobich]

Aplogies, I was just sort of quickly responding based on the examples you were asking about. I wasn’t really looking at the actions map very closely, but it’s all there, of course.

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

In looking at the Actions Map again, we can see that the “themeblvd_header_content” wraps the area where the logo is. And the area where the menu is the “themeblvd_header_menu”. So we would do this:

remove_action( 'themeblvd_header_content', 'themeblvd_header_content_default' );
remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );

I also attempted to place the themeblvd_header_logo above the left sidebar by using the following code:
add_action( ‘themeblvd_header_logo’, ‘themeblvd_fixed_sidebar_before_default’ );

You’ve got that sort of reversed. When using the add_action function, the first parameter is the name of the hook, and the second parameter is the name of the function you want to place there.

This is what you’re going for I think:

add_action( 'themeblvd_fixed_sidebar_before', 'themeblvd_header_logo_default' );

“themeblvd_fixed_sidebar_before” is the name of the hook where we want our action to happen. And then our function that we want to happen there is called “themeblvd_header_logo_default”.

[k_b]

Thanks Jason, got this working now!
Great support!!

[k_b]

Hi Jason,

Sorry had another question in relation to the above.

The action hooks above are working great in a standard browser width. When the site is being viewed on a tablet or mobile device the vertical nav doesn’t work that great. I was wondering if it would be possible to re-instate the default nav when viewed on tablet and mobile devices only – i.e. the vertical nav would be removed once the site hits the first media query and it is replaced by the default mobile nav?

Thanks

[Jason Bobich]

If you were going to take this approach, you’d need to hide/show stuff with CSS opposed to actually unhooking everything in the PHP. So, you’d have all HTML elements there, but you’d just adjust the display properties for the different menus depending on the @media viewport.

For example:

#top #access { display: none; } /* Hide menu in header */
#main #access { display: block; } /* Show menu in main area */

… A more practical approach might be to just tackle the CSS directly and make it look better as you scale down to tablet and mobile.

[Author]

Replies