rachelbaker / bootstrapwp-Twitter-Bootstrap-for-WordPress

CSS toolkit from Twitter for use as a WordPress theme
http://twitter.github.com/bootstrap
651 stars 136 forks source link

Secondary Menu - wp_nav_menu & register_nav_menus #90

Open seanthomas opened 11 years ago

seanthomas commented 11 years ago

Hello,

Firstly I'd like to say great theme, I'm finding it a great starter theme! So thank you!

I'm looking to create a secondary menu within the top navigation bar.

My plan is to have a menu displayed starting from the left and then another menu which will display social icons on the right side using the pull-right class which I've achieved...

Firefox Example

Now for my code...

Functions.php:

/*
| -------------------------------------------------------------------
| Setup Theme
| -------------------------------------------------------------------
|
| */
add_action( 'after_setup_theme', 'bootstrapwp_theme_setup' );
if ( ! function_exists( 'bootstrapwp_theme_setup' ) ):
function bootstrapwp_theme_setup() {
  add_theme_support( 'automatic-feed-links' );
  /**
   * Adds custom menu with wp_page_menu fallback
   */
  register_nav_menus( array(
    'primary-menu' => __( 'Primary Menu', 'bootstrapwp' ),
    'secondary-menu' => __( 'Secondary Menu', 'bootstrapwp' ),
  ) );
  add_theme_support( 'post-formats', array( 'aside', 'image', 'gallery', 'link', 'quote', 'status', 'video', 'audio', 'chat' ) );
  /**
   * Declaring the theme language domain
   */
   load_theme_textdomain('bootstrapwp', get_template_directory() . '/lang');
}
endif;

Header.php:

    <div class="navbar navbar-relative-top">
           <div class="navbar-inner">
             <div class="container">
           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
          <?php
           /** Loading WordPress Custom Menu  **/
           wp_nav_menu( array(
              'theme_locator'   => 'primary-menu',
              'menu'            => 'primary-menu',
              'container_class' => 'nav-collapse',
              'menu_class'      => 'nav',
              'fallback_cb'     => '',
              'walker' => new Bootstrapwp_Walker_Nav_Menu()
          ) ); ?>
                    <?php
           /** Loading WordPress Custom Menu  **/
           wp_nav_menu( array(
              'theme_locator'   => 'secondary-menu',
              'menu'            => 'secondary-menu',
              'container_class' => 'nav-collapse',
              'menu_class'      => 'nav icon pull-right',
              'fallback_cb'     => 'false',
          ) ); ?>

        </div>
      </div>
    </div>

The issue I am having is with the theme_location parameter. When I am in the WordPress Admin > Appearance > menus its displays my Theme Locations - Primary Menu & Secondary Menu which is great, just what I need.

However...

When I assign a menu to each it is not being saved. I'm firstly looking to rule out my php coding? Or is this something to do with my database?

I have turned off all plugins when testing this.

I have got around it by using:

              'theme_locator'   => 'primary-menu',
              'menu'            => 'primary-menu',
              'theme_locator'   => 'secondary-menu',
              'menu'            => 'secondary-menu',

WordPress Example

Many thanks for your help in advance,

Regards,

Sean.

spiliog commented 11 years ago

Great idea Sean. Waiting for a solution me too.

seanthomas commented 11 years ago

Thanks spilog.

I think I may have found the problem in regards to why the menus wasn't being saved.

After reading this post over at wordpress: http://wordpress.org/support/topic/not-able-to-save-custom-menu-selection

I decided to rename my theme folder (It was originally the same name as what i downloaded it, which is rather long!)

Seems to have done the trick, however theme_locator isn't working correctly so I'll look more into my php coding.

I've also found another bug:

Whilst styling .navbar-inner and setting class opacity: 0.9 the drop down menu appears behind the content below the navbar.

When setting opacity to 1.0 it appears fine, anything lower than 1.0 the menu disappears behind the content.

This doesn't appear to be a z-index issue, as the content below is set to 1. and the drop menu is 1000 I believe.