How to add secondry Nav bar in beans themes?


Hello any one tell me How to add secondry Nav bar in beans themes?

It's Possible


Hey Amaya,

Here is a example code snippet to add to your child theme functions.php:

// Register secondary menu.
add_action( 'after_setup_theme', 'example_register_menu' );

function example_register_menu() {

  register_nav_menus( array(
    'example-secondary' => __( 'Secondary Menu', 'example-domain' ),
  ) );

}

// Add the secondary menu after the header.
add_action( 'beans_header_after_markup', 'example_secondary_menu' );

function example_secondary_menu() {

 wp_nav_menu( array(
   'theme_location'  => has_nav_menu( 'example-secondary' ) ? 'example-secondary' : '',
    'container'       => 'div',
   'container_class' => 'tm-example-secondary-nav uk-container uk-container-center',
   'beans_type'      => 'navbar',
  ) );

}

To see your menu, go to your Admin->Appearance->Menu, create a menu and assign it to the Secondary Menu position.

The snippet above add the menu after the header, I will let you check Beans documentation and various forum discussions if you need to learn more about how Beans hooks work (this reply for example).

Happy coding,


Hi Thierry,

Thanks for all you do for the community and for this perfect framework!

Now, could you please help me. I can not figure out how to center the above secondary menu (actually I made it before the footer changing a bit the above code).

Thank you in advance.


Hi Leon,

Thanks for your kind words, we are glad to have you part of the community. Here a CSS snippet you may apply in your child considering that you are using the snippet posted above (aka using the tm-example-secondary-nav class):

.tm-example-secondary-nav {
 text-align: center;
}

.tm-example-secondary-nav .uk-navbar-nav,
.tm-example-secondary-nav .uk-navbar-nav > li {
  display: inline-block;
  float: none;
}

Happy coding,


Thank you very much, Thierry!

It works perfectly!

Write a reply

Login or register to write a reply, it's free!