Customize secondary nav

Hello Beans community, Another question:

I had create a secondary navigations in my site, in this position: beans_header_after_markup

This is the code that i used:

// Register secondary menu.
add_action( 'after_setup_theme', 'register_menu_2' );
function register_menu_2() {
    register_nav_menus( array(
        'secondary' => __( 'Secondary Menu', 'fabiographic' ),
    ) );
}

// Add the secondary menu after the header.
add_action( 'beans_header_after_markup', 'fabio_secondary_menu' );
function fabio_secondary_menu() {
    wp_nav_menu( array(
        'theme_location'  => has_nav_menu( 'secondary' ) ? 'secondary' : '',
        'container'       => 'div',
        'container_class' => 'tm-secondary-nav uk-container uk-container-center',
        'beans_type'      => 'navbar',
    ) );
}

It is work very good,

but I add some customizations through my style.css at the div class .tm-secondary-nav, and the problems is that this div is not full-width.

I would add a div full with that contain it, like that in this page of Beans site: http://www.getbeans.io/documentation/ (This secondary nav, have a another div full width called tm-help-navigation that contain it).

How can I add also this?

Thanks to those who can help me

Fabio

Hi Fabio,

You can add HTML in your callback function as you want, so for example you can easily a wrapping div as follow:

function fabio_secondary_menu() {
 ?>
  <div class="example-class">
   <div class="tm-secondary-nav uk-container uk-container-center">
     <?php
     wp_nav_menu( array(
       'theme_location' => has_nav_menu( 'secondary' ) ? 'secondary' : '',
       'container'      => false,
        'beans_type'     => 'navbar',
     ) );
      ?>
    </div>
  </div>
  <?php
}

Note that I even moved the container in an HTML div in the example above which is not needed if you prefer to have it added in wp_nav_menu() as you did in your code snippet.

Happy coding,

Wow, thank you Thierry. I wish you and the community an Happy New Year 2017.

Thanks Fabio, happy new year to you too 🙂