[Resolved] Off Canvas Mobile Menu Toggle Customization

Home Forums Support [Resolved] Off Canvas Mobile Menu Toggle Customization

Home Forums Support Off Canvas Mobile Menu Toggle Customization

  • This topic has 10 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1457856
    Anthany

    Hi GeneratePress team, I have searched through your forums to find a good way to have a filtering option for the mobile version of my website and the best way I have found to do so is by going to customizer>layout>off canvas panel and making off canvas panel “desktop only”. This brings up a toggle option above my hamburger “Menu” toggle on my primary navigation which I can now add widgets to for filtering purposes. My question to you is, how do I change the colour of this new “toggle” option and how do I set the toggle to only show up on shop pages? I have thoroughly searched the customizer and your forms for answers but I have yet to find a solution, any help would be greatly appreciated.

    Thanks, Anthany

    #1457876
    Elvin
    Staff
    Customer Support

    Hi Anthany,

    My question to you is, how do I change the colour of this new “toggle” option and how do I set the toggle to only show up on shop pages?

    Conditional page styling are usually done with custom CSS.

    I’m not sure I fully understand what this “toggle” element is. Can you link us to the site in question?

    Also, if possible, it’ll help a lot if you could provide screenshots or screen recordings of parts of the site you want to fix. Thanks. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1457902
    Anthany

    The website URL is http://www.scuffed.ca, and yes I can absolutely send a screen recording of the part I am talking about, is there an email I can send the video file to?

    Thanks, Anthany

    #1458192
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    /* set colors of toggle */
    .site-header a.slideout-toggle {
        color: #f00;
    }
    
    .site-header a.slideout-toggle:hover {
        color: #00f;
    }
    /* Hide toggle unless in porduct category */
    body:not(.tax-product_cat) .site-header a.slideout-toggle {
        visibility: hidden;
    }
    #1459059
    Anthany

    Amazing that did it! Thank you so much David.

    #1459115
    David
    Staff
    Customer Support
    #1470036
    Anthany

    Apologies for reopening this forum but I have a question about the toggle mentioned here. It was created with this custom HTML put into the header:

    Filters
    (something I forgot to mention the first time around but David knows his stuff so it didn’t matter)

    It works great and is exactly what I wanted with your help but I was wondering if there was a way to hide it on the desktop version of my site but keep it on the mobile version. Currently I have the toggle labeled “Filters” that is floating in the top right of the desktop version of my site and I found I can hide it using the CSS:
    .slideout-toggle {
    display: none;
    }

    Problem is this also hides it on my mobile site which I need. Any ideas on how I could just hide it on the desktop?

    Thanks a bunch, Anthany

    #1470039
    Anthany

    Note to self, typing custom HTML into the forum does not work lmao. The HTML was supposed to be:
    <a class="slideout-toggle" href="#">Filters</a>

    #1470351
    David
    Staff
    Customer Support

    You can use our hide-on-* classes:

    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    So your slideout-toggle HTML would look like this:

    <a class="slideout-toggle hide-on-desktop" href="#">Filters</a>

    #1470883
    Anthany

    Thanks so much David, you saved the day once again.

    #1470937
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.