More Menu

You only have one main menu, but you have several items in there (the example you give above is one menu with several items).

Go to Appearance > menus to set it up.

Are you wanting to add more menus or more menu items to a menu?

You can create another menu in the Appearance > Menus and add it into any element you wish. I’ve created a menu named, “menu-member” and inserted between the sm icons and the search form in the header and a third one in the footer of this site. https://www.biologydesign.com/SarahCHanson.

You just have to find the right php file to copy to your child theme and edit it. For example, this is the code for my login/signup menu that in added to the class-header-menu.php file.

<div class="member-login span2">
			<?php wp_nav_menu( array('menu' => 'menu-member' )); ?>
                    </div>

If you just want to add more items, then go to Appearance > Menus and choose the pages/links/categories from the left of the page that you want to add to your menu.

Hope this helps.

This is great. I used this and it worked. But the problem is that I want the menu to run Horizontal like this:

Partners | About Us | Contact Us | Staff | Client Login

instead it is showing up like this:

– Partners
– About Us
– Contact Us
– Staff
– Client Login

Any help would be appreciated

Here is the page. You can see the new Menu I added with your help at the top:

https://www.keilsonconsulting.com/clients/KDS/

Awesome!! Glad it worked.

To make the menu line up horizontally you just need to make a few changes in your css and your class-header-menu.php file(I think it’s that one).

First, you are constraining that menu within .span2. You need to make the space for the menu larger. So I would suggest changing .span2 to .span4 or 5 in that php file. Or you could just change the width of .span2 in your css like this:

.navbar-inner .row-fluid .span2 {
    width: 100%;
}

Once you do that you just need to float the li elements within that span to the left, thusly:

li {
    float: left;
}

After that you just need to add a bit more styling to your css file to change the list-style (ie: the bullets).

Hope this helps. Have fun

OK. A couple more things. When I do the:

li {
    float: left;
}

It changes my menu in the left section of the footer too.

I know it is a stupid question, but how do I designate the new menu entry I added:

<div class="member-login span5">
			<?php wp_nav_menu( array('menu' => 'menu-minor )); ?>
                    </div>

To refer to a different “li” then the left section of the footer?

You can see the issue here:

https://www.keilsonconsulting.com/clients/KDS/

Chris

Nevermind. i figured it out. Thank you so much.

But I do have one more question. I may even figure it out before you get back to me. How can I get my new menu to be justified to the right. Currently it seems to be right next to my logo. I want it to be on the right side of the page.

Just add a {float: right} to the element (container) that the list lies within.

So, for your example:

.member-login .span5 {
    float: right;
}

Also, as a side note, you can, and should change your selector name from div class=”member-login span5″ to something that makes sense for your what you’re displaying in the element. For example, “about-us-menu span5”. All you have to do is makes sure that the name in the HTML corresponds with the selector name in your CSS (.about-us-menu.span5).

Not sure if you’re aware but there is an awesome browser tool called firebug. It lets you inspect your HTML/CSS markup so you know what names each element has. That’s how I was able to determine that the element in your website that needed to be floated to the right was called <div class=”member-login span5″>. It’s especially essential when working with sites developed on PHP.

Hope all of this helps.

I do use Firebug. It is a great help. So I did what you said above and it did not seem to move it over. Maybe I am placing the code of the menu in the wrong place in the PHP file.

<?php
/**
* Menu action
*
*
* @package      Customizr
* @subpackage   classes
* @since        3.0
* @author       Nicolas GUILLAUME <[email protected]>
* @copyright    Copyright (c) 2013, Nicolas GUILLAUME
* @link         https://themesandco.com/customizr
* @license      https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

class TC_menu {

    function __construct () {
        add_action( '__menu'                       , array( $this , 'tc_render_menu' ));
    }

    /**
      * Menu fallback. Link to the menu editor.
      * Thanks to tosho (https://wordpress.stackexchange.com/users/73/toscho)
      * https://wordpress.stackexchange.com/questions/64515/fall-back-for-main-menu
      *
      * @package Customizr
      * @since Customizr 1.0
     */
      function tc_link_to_menu_editor( $args )
      {
          if ( ! current_user_can( 'manage_options' ) )
          {
              return;
          }
          // see wp-includes/nav-menu-template.php for available arguments
          extract( $args );

          $link = $link_before
              . '<a href="' .admin_url( 'nav-menus.php' ) . '">' . $before . __('Add a menu','customizr') . $after . '</a>'
              . $link_after;

          // We have a list
          if ( FALSE !== stripos( $items_wrap, '<ul' )
              or FALSE !== stripos( $items_wrap, '<ol' )
          )
          {
              $link = "<li>$link</li>";
          }

          $output = sprintf( $items_wrap, $menu_id, $menu_class, $link );
          if ( ! empty ( $container ) )
          {
              $output  = "<$container class='$container_class' id='$container_id'>$output</$container>";
          }

          if ( $echo )
          {
              echo $output;
          }

          return $output;
      }

     /**
      * Menu Rendering
      *
      * @package Customizr
      * @since Customizr 3.0
     */
    function tc_render_menu() {
      ?>
      <div class="navbar notresp span9 pull-left">

              <div class="navbar-inner" role="navigation" align="right">

                  <div class="row-fluid">

                    <div class="member-login span5">
			<?php wp_nav_menu( array('menu' => 'about-us-menu' )); ?>
                    </div>

                    <h2 class="span7 inside site-description"><?php bloginfo( 'description' ); ?></h2>
                  </div>

                  <div class="nav-collapse collapse">

                    <?php wp_nav_menu( array( 'theme_location' => 'main' , 'menu_class' => 'nav' , 'fallback_cb' => array( $this , 'tc_link_to_menu_editor' ), 'walker' => tc__ ( 'header' , 'nav_walker' )) );  ?>

                  </div><!-- /.nav-collapse collapse -->

              </div><!-- /.navbar-inner -->

          </div><!-- /.navbar notresp -->

          <div class="navbar resp">

              <div class="navbar-inner" role="navigation">

                  <div class="social-block"><?php do_action( '__social' , 'tc_social_in_header' ) ?></div>

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

                 <div class="nav-collapse collapse">
                      <?php wp_nav_menu( array( 'theme_location' => 'main' , 'menu_class' => 'nav' , 'fallback_cb' => array( $this , 'tc_link_to_menu_editor' ) , 'walker' => tc__ ( 'header' , 'nav_walker' )) );  ?>
                 </div><!-- /.nav-collapse collapse -->

              </div><!-- /.navbar-inner -->

          </div><!-- /.navbar resp -->
    <?php
    } //end of render_menu()

}

My bad, there was a typo in my last response. I apologize.

In your css it should be:

.member-login.span5 {
    float: right;
}

If that still doesn’t work you might just have to add more specificity:

.row-fluid .member-login.span5 {
    float: right;
}

I was able to move that menu to the right of your site using firebug. So it should work by changing the code in your css. Again, I apologize for the typo.

Btw, your site’s looking great!

Just to clarify css.

When you have two or more classes for an element as you do in your example, the selectors are connected as they are in the first example of my revised code.

If an element is nested within another element, just as span5 is within row-fluid then you put a space between the selectors as I have done in the my example with more specificity.

Hope this helps.

You are awesome. It worked perfectly.

ckeilson, please mark this thread as resolved so others searching for the same solution can easily find one in the many many pages of topics.

Glad I could help.