Is there any way to swap div id "container" with div id "secondary"?

Unite Theme
1

Hello! I hope you can help me here -

For my website, I have the sidebar on the left with images on the right. With Unite’s responsive theme, if I shrink the browser horizontally, after a while the sidebar on the left drops underneath the images. I want the sidebar to be above the images.

Digging into website code, this is what I see:

<div class="row side-pull-right">
 ::before
    <div id="container">
      <div id="content" role="main">
        <div id="primary" class="col-md-8"> (images here) </div>
      </div>
    </div>
    <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> (sidebar list) </div>

In Chrome’s Inspect mode, if I switch the order so “secondary” is above “container”, then it behaves the way I want it to. But I can’t figure out how/where to switch this order - which .php file to look into, or what to add to my functions.php file. Any help would be greatly appreciated!

Here is the website page.

Thank you very much!

2

Hi @small,

I hope you are well today and thank you for your question.

You can try achieving this by using the attached custom child theme of Unite theme that contains some custom code.

Best Regards,
Movin

3

Thank you for your quick response, Movin!

I implemented the function and the index.php but I still have the issue. Is the CSS file supposed to be empty?

I feel we are so close! The link leads to the category page, not index page. I’ve been trying to figure out which .php file is related to this product-category page but have not been able to find it.

I focused on part of the code I included from before
<div id="primary" class="col-md-8"> (images here) </div>

This allowed me to trace this location to unite\inc\extras.php which has this code

add_action('woocommerce_before_main_content', 'unite_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'unite_wrapper_end', 10);

function unite_wrapper_start() {
  echo '<div id="primary" class="col-md-8">';
}

function unite_wrapper_end() {
  echo '</div>';
}

But then I don’t know what to do at this point. =(

4

The provided child theme is working fine on my test site.

Could you please just try using my shared child theme as it is without using your child theme?

I don’t think you have implemented the shared code properly on your site so could you please share me your child theme so that i can test it on my test site?

5

Certainly! I’ve attached my child-theme. I really appreciate you looking into this!

My “products” currently look like this. Warlock is the category that leads to original link.

On the single page view of the product (screenshot), the side bar is also below div id “container”.

6

I have made the changes in your shared child theme and attached the modified child theme to this reply so please try using this updated child theme.

7

Hi @Movin. I really appreciate you looking at my child theme. I downloaded your theme, deleted the one from my website, and uploaded your version, however the issue still remains.

I just want to double-check with you, since it seems you were able to fix it on your end: when clicking on the category and shrinking the width of the page, my sidebar drops to the bottom of the page (like screenshotA).

But if I inspect the page and manually shift id “secondary” to occur before id “container”, then the sidebar stays on top for category view (screenshotB). I just wanted to check that you were able to replicate screenshotB.

8

Would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

9

Hi Movin!

Wow thank you! If you don’t mind telling me if you delete/change something. Just point me to where you changed it. I am still learning.

http://www.pibbit.com/wp-login.php

login: admin
pw: HelloMyDear!99

Thank you! And Good luck!

10

Thank you for sharing the site details.

I confirmed that it is working fine on all the pages of your site except Woocommerce Product Categories pages because the plugin uses different templates.

To change it on the Woocommerce Product Categories pages you have to change its templates as described on the following page or contact the plugin support regarding this.

11

I see. I understand.

Thank you so very much for taking the time to troubleshoot it to this point! Your patience is greatly appreciated.

I will continue on, focusing on Woocommerce.

12

You are most welcome here :slight_smile: