Move Category Product sidebar to top for mobile

  • marnatowne

    (@marnatowne)


    5 years, 11 months ago

    I have set up a product category sidebar on the woocommerce category page. I have two widgets; one is a dropdown version of the category list. These are controlled by media queries.

    However, I’m having a problem moving the sidebar to above the main content. I have found about three or four different CSS snippets online, but none have worked.
    One friend suggested something that works to move the menu, but messes up the desktop alignment of the main content area.

    I am at a loss…

    /***WC Product category menu to top on mobile***/

    #content-area {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    }
    #sidebar {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    }
    #left-area {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
    }

    @media (min-width: 768px) {
    #woocommerce_product_categories-5 {display:none;}
    }
    @media (max-width: 767px) {
    #woocommerce_product_categories-4 {display:none;}
    }

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator bcworkz

    (@bcworkz)

    5 years, 11 months ago

    display: box; is incorrect. You want display: flex-box; flex-direction: column; for the #content-area container, then add order properties to #left-area and #sidebar elements. This will do odd things to the desktop view, so manage its application with media queries.

    Thread Starter marnatowne

    (@marnatowne)

    5 years, 11 months ago

    Thank you for your response. I’m unable to get this to work. Do I need to set the query for all three containers?

    @media (min-width: 768px) {
	#content-area {
    display: -webkit-box;
    display: -moz-box;
    display: flex-box; 
	flex-direction: column;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
	}
}

@media (min-width: 768px) {
#sidebar {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
}

@media (min-width: 768px) {
#left-area {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
}
    Moderator bcworkz

    (@bcworkz)

    5 years, 11 months ago

    No, but it would work anyway. The CSS is interpreted the same either way. You need order: 1; for #sidebar and order: 2; for #left-area.

    You can remove the vendor specific box rules if you want, all recent browsers now support flex box.

    Thread Starter marnatowne

    (@marnatowne)

    5 years, 11 months ago

    Well, still not working

    /***category menu change for mobile***/

@media (min-width: 768px) {
	#content-area {
    display: -webkit-box;
    display: -moz-box;
    display: flex-box; 
	flex-direction: column;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
	}
}

@media (min-width: 768px) {
#sidebar {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
	order: 1;
}
}

@media (min-width: 768px) {
#left-area {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
	order: 2;
}
}

@media (min-width: 768px) {
#woocommerce_product_categories-5 {display:none;}
}
@media (max-width: 767px) {
#woocommerce_product_categories-4 {display:none;}
}

    could my styled text be conflicting?

    /***Sidebar styled Text***/

.sidebar .product-categories li a, .product-categories li a, .sidebar .widget_categories li a {
    display: block;
    padding: 5px 10px;
    border-bottom: solid 1px #eee;
    border-color: rgba(0,0,0,.05);
    margin-bottom: 5px;
	}
    Moderator bcworkz

    (@bcworkz)

    5 years, 11 months ago

    I don’t think so. It’s hard to say since the rules are not active on the page you linked in your OP. I get why you may not want rules active that are not working correctly, but it makes it difficult to determine what the problem is.

    Try adding the following to the Additional CSS panel of the customizer:

    @media (max-width: 768px) {
  #content-area {
    display: flex-box; 
    flex-direction: column;
  }

  #sidebar {
    order: 1;
  }

  #left-area {
    order: 2;
  }
}

    If there is other content there already, add this to the very end.

    Thread Starter marnatowne

    (@marnatowne)

    5 years, 11 months ago

    Thank you so much for your attention, but I’m still not getting anywhere. I added this to the end, as well as tried to replace everything with this…. I think I may just have to give up and leave the dropdown menu at the bottom on mobile. Besides all your help, I’ve had about 5 or 6 other suggestions. I might try this on a test site with no plugins though…

    I’m a CSS novice as you could guess ;). But I believe the rules are active, I haven’t put them in my child theme, but I have been publishing with the theme customizer. Should I be clearing that and trying in the stylesheet instead?

    Moderator bcworkz

    (@bcworkz)

    5 years, 11 months ago

    I suppose it’s worth a try. The customizer CSS usually takes priority in the cascade of styles, so is the best option, but its content is not showing up on the page for some reason. According to my browser CSS inspector, the rules are not applied; and the CSS should show up as inline styles on the page and they are not there.

    Thread Starter marnatowne

    (@marnatowne)

    5 years, 11 months ago

    I guess I don’t know why it’s not showing up.

    It does not work on my test site either. https://playground.towne-cox.com/?product_cat=category-2

    I hate archive pages! If I build a regular page and add a sidebar, the stacking order works fine without any CSS. Grrrr.

    Moderator bcworkz

    (@bcworkz)

    5 years, 11 months ago

    OK, that’s a good clue! Something about just the archive template then. Do you know which file generates the archive list? I think it would be WooCommerce’s /template/product-archive.php, but I could be wrong. Do a quick test by adding “Awesome Products!!!” or whatever after the </header> portion of the template file. You can use the plugin editor, just stay out of the <?php ?> portions. Reload an archive page and see if the added text appears. Remove the added text after you do this test.

    If that’s the right template, we could try overriding this template and alter it by placing some conditional PHP code that essentially says if mobile, do sidebar at top, and if not mobile do sidebar at side. I can help with the specifics if we’ve found the right template and you want to try this. I want to be sure before spending time explaining what to do.

    I should warn you that overriding WC templates is a bit of a pain because you sometimes need to transfer your edits to a new template version after WC updates. You will also need to have site FTP access and know how to use a FTP client like FileZilla to add folders and copy files. Your hosting account should also provide a way to do this. Without digging into the specifics your theme and why the customizer CSS doesn’t show up, this is about the only solution I can think of. I don’t dare dig into the mysteries of Divi 🙂

    tpedreira

    (@tpedreira)

    5 years, 8 months ago

    Additional CSS:

    @media (max-width: 680px) {
    .site-content .col-full {
    display: flex;
    flex-direction: column-reverse;
    }
    }

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Move Category Product sidebar to top for mobile’ is closed to new replies.