moving #item-nav

[parousia]

Hi!

I’m using a full width profile layout and I was wondering if its possible to move the #item-nav onto a different row set to width: 100% so that it spans across the top above the side bar.

in the home.php file I’ve tried moving:

COPY CODE

        <div id="item-nav">
              <div class="item-list-tabs no-ajax" id="object-nav" role="navigation">
                  <ul class="responsive-tabs">
                      <?php bp_get_displayed_user_nav(); ?>

                      <?php do_action('bp_member_options_nav'); ?>

                  </ul>
              </div>
          </div>
          <!-- #item-nav -->

inside the #item-header div thats wrapped in the if statement but it doesnt display.

Any help greatly apprecaited!

[parousia]

Figured it out my solution if anyone is interested was to put the buddypress .php file and edited the following code:

COPY CODE

<?php if( sq_option( 'bp_full_profile', 0 ) == 1 && bp_is_user() ): ?>

    <section class="alternate-color bp-full-width-profile">
        <div id="item-header" role="complementary">

            <?php bp_get_template_part('members/single/member-header') ?>

        </div>
        <!-- #item-header -->
        
        <div id="main-container" class="container">
            <div class="row">
                <div id="buddy-menu-top" class="main-color">
                    <div id="buddypress">

                      <div class="row">

                                <div class="col-sm-12">
                            <div id="item-nav">
                                  <div class="item-list-tabs no-ajax" id="object-nav" role="navigation">
                                      <ul class="responsive-tabs">
                                          <?php bp_get_displayed_user_nav(); ?>

                                          <?php do_action('bp_member_options_nav'); ?>

                                      </ul>
                                  </div>
                              </div>
                              <!-- #item-nav -->
                          </div>

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

<?php endif; ?>

I made the html as similar to the original menu as possible in order to keep the css applied.

a very rough example can be seen here – http://www.cultexposure.com/members/lauriedugdale/

[dennisadonis]

Hey parousia,

Like what you’ve done there! Which file did you put this in? I looked for buddypress.php but couldn’t find it in the core plugin files…

[parousia]

I’m not much good at php I sort of just worked it out as I went along so there might be a better way of doing this, also I strongly advise you use the child theme if you’re not already.

Buddypress.php can be found in the wp-content/themes/kleo directory. On line 105 of the buddypress.php file you should see an if statement that looks like this:

COPY CODE

<?php if( sq_option( 'bp_full_profile', 0 ) == 1 && bp_is_user() ): ?>

    <section class="alternate-color bp-full-width-profile">
        <div id="item-header" role="complementary">

            <?php bp_get_template_part('members/single/member-header') ?>

        </div>
        <!-- #item-header -->
                
    </section>

<?php endif; ?>

I then added to the if statement so it look like this :

COPY CODE

<?php if( sq_option( 'bp_full_profile', 0 ) == 1 && bp_is_user() ): ?>

    <section class="alternate-color bp-full-width-profile">
        <div id="item-header" role="complementary">

            <?php bp_get_template_part('members/single/member-header') ?>

        </div>
        <!-- #item-header -->
        
        <div id="main-container" class="container">
            <div class="row">
                <div id="buddy-menu-top" class="main-color">
                    <div id="buddypress">

                      <div class="row">

                                <div class="col-sm-12">
                            <div id="item-nav">
                                  <div class="item-list-tabs no-ajax" id="object-nav" role="navigation">
                                      <ul class="responsive-tabs">
                                          <?php bp_get_displayed_user_nav(); ?>

                                          <?php do_action('bp_member_options_nav'); ?>

                                      </ul>
                                  </div>
                              </div>
                              <!-- #item-nav -->
                          </div>

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

<?php endif; ?>

So you dont get two menus showing up you also have to remove the following code from the home.php which can be found in themes/kleo/buddypress/members/single

COPY CODE

        <div id="item-nav">
              <div class="item-list-tabs no-ajax" id="object-nav" role="navigation">
                  <ul class="responsive-tabs">
                      <?php bp_get_displayed_user_nav(); ?>
 
                      <?php do_action('bp_member_options_nav'); ?>
 
                  </ul>
              </div>
          </div>
          <!-- #item-nav -->

I also noticed that the menu still shows up in the media tab to get I used css display:none on the div although its probably better and more efficient to find it and remove it from the file.

Hope that helps.

[dennisadonis]

Great, thanks for the tips – good to have an option like this for the layout!

[Author]

Posts