[Resolved] Sidebar on mobile by click

[roadlink]

Hello,
I use Prime template from site library.

My sidebar and product filters goes bottom of the page in mobile.
Can I make a button to click and open sidebar like Slideout menu?

[Leo]

Hi there,

Are you using the off canvas navigation?

If so you can try adding a product filter widget in the off canvas widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

[roadlink]

Hi Leo,

I want to see them in desktop resolution.
Will they be seen if I put them in off canvas?

[David]

Hi there,

you would have to include the filter widgets in the sidebar as well.
We can then provide some CSS to hide them on Mobile.

[roadlink]

Hello David,
Thanks for suggestion.

I guess no need to add same content twice.
I decided to try the method from niche theme (site library)

But I couldn’t success to have similar results. If you have time, can you check where is my mistake?

I follow the instructions from here. https://gpsites.co/niche/how-the-shop-was-made/#more-349

1. “Hook #1 – Woocommerce Shop Category Menu.”
I didn’t do it because I have too many categories. It become too crowded.

2. “Hook #2 – Woo Shop Filter and Breadcrumb”

I have added 2 functions like this;
https://prnt.sc/v9eqe3
https://prntscr.com/v9eqe3

Then I have added CSS like this;
https://prnt.sc/v9esa6

Result part;
1. I still have the menu (off-canvas menu) on desktop too. while niche theme doesn’t have.
https://prnt.sc/v9faz6

2. Filters are not seen properly.
2.a Numbers stays in another line.
2.b. If I added an attribute filter in dropdown mode, options can’t be seen.
https://prnt.sc/v9faz6

3. I couldn’t manage to have similar looking like in here.
https://prnt.sc/v9f158
https://prnt.sc/v9f3cu

[David]

1. To remove the menu from the Desktop Off Canvas you would use this CSS:

@media (min-width: 768px) {
    .slideout-navigation .main-nav {
        display: none;
    }
}

2, Did you resolve these issues?

3. For the Filter Toggle to display correct when using SVG Icons you need to replace this:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>

with this:

<?php
$icon = '';

if ( function_exists( 'generate_get_svg_icon') ) {
	$icon = generate_get_svg_icon( 'menu-bars' );
}
?>

<span class="slideout-toggle woo-filter-toggle hide-on-mobile has-svg-icon"><a href="#"><?php echo $icon; ?> FILTER</a></span>

[roadlink]

Dear David,

Thanks a lot for support.

1 and 3 worked great. Thanks again.

2.a solved by this code. Sorry I missed that in advance. https://gpsites.co/niche/off-canvas-panel/#more-367
2.b is still there. When I add dropdown filter, I can’t see the attributes.

4. I see the category name in the top. I tried this css but couldn’t increase font size and also uppercase. https://prnt.sc/v9owry

.woocommerce-products-header {
padding: 20px;
height: 60px;
background-color: #092143;
text-transform: uppercase !important;
text-align: center;	
font-size: 50px !important;
font-weight: 500;
color: #ffffff;
}

[David]

2b. Did you resolve this – found one attribute and the count number is inline?

4. Use this CSS to size and style the H1

.woocommerce-products-header h1 {
    font-size: 50px;
    text-transform: uppercase;
}

[roadlink]

Hello David,

Thanks.

4. Will this CSS change other H1’s in the site?

2b. This is related with dropdown style attributes. https://prnt.sc/va51wa
We can’t see them when they are dropdown.
but list style is working.

5. Selected filters are on top of each other. Do you have any suggestion? https://prnt.sc/va51wa

[David]

4. No it will only apply to the H1 displayed on the product archives.

I can’t access your site ? Can you check the URL

[roadlink]

Hi,
Added again.
thanks

[David]

Sorry – but none of us are able to access that link, the login is coming back invalid.

[roadlink]

It is weird, I have created another password and tried in different browser.
It worked.

Can you try again?

[David]

You have add this CSS:

.slideout-widget.woocommerce ul li {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

Change it to:

.slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

[roadlink]

Thank you, I solved selected filters issue.
But dropdown problem is still there. Any idea?

Thanks

[Author]

Posts