This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Main Menu as a Vertical Navigation?

  • Creator
    Topic
  • #1303
    k_b
    Participant

    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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Author
    Replies
  • #1312
    Jason Bobich
    Keymaster

    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.

    #1350
    k_b
    Participant

    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!

    #1354
    Jason Bobich
    Keymaster

    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/

    #1356
    k_b
    Participant

    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.

    #1357
    Jason Bobich
    Keymaster

    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.

    #1359
    Jason Bobich
    Keymaster

    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.

    #1384
    k_b
    Participant

    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?

    #1399
    Jason Bobich
    Keymaster

    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”.

    #1425
    k_b
    Participant

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

    #1629
    k_b
    Participant

    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

    #1636
    Jason Bobich
    Keymaster

    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.

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.