[Resolved] Sidebar on mobile by click

Home Forums Support Sidebar on mobile by click

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1505077
    tertas

    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?

    #1505133
    Leo
    Staff
    Customer Support

    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

    #1505230
    tertas

    Hi Leo,

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

    #1506502
    David
    Staff
    Customer Support

    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.

    #1509220
    tertas

    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

    #1510097
    David
    Staff
    Customer Support

    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>
    #1510175
    tertas

    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;
    }
    #1510300
    David
    Staff
    Customer Support

    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;
    }
    #1510873
    tertas

    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

    #1510955
    David
    Staff
    Customer Support

    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

    #1511244
    tertas

    Hi,
    Added again.
    thanks

    #1512059
    David
    Staff
    Customer Support

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

    #1512582
    tertas

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

    Can you try again?

    #1513282
    David
    Staff
    Customer Support

    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%;
    }
    #1515589
    tertas

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

    Thanks

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.