Support » Fixing WordPress » .slideToggle Javascript issue with search form

  • Hey guys,

    I have a search form in my header that I want to stick to the top of the screen when scrolling just like I do with my menu. At this time, I’m able to have it stick where I want and all that. The only problem is that I need it to slide to the left when I toggle the search button (the box is hidden until toggled). Currently, it slides to the bottom nicely and then jumps to the left of the button, where I want it to end up. However, this doesn’t look smooth.

    Here is my JS:

    /*
     * Toggles Header Search On and Off
     */
    jQuery(document).ready(function($){
        $(".search-toggle").click(function(){
            $("#search-container").slideToggle('slow',  function(){
                $('.search-toggle').toggleClass('active');
            });
            // Optional return false to avoid the page "jumping" when clicked
            return false;
        });
    });

    Please let me know what I need to change!

    Thanks,

    Brett

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sounds like a CSS issue. Can you show us the page with the issue?

    Thread Starter thisguynelson

    (@thisguynelson)

    It’s currently being hosted on local servers.

    Here is the CSS:

    .search-toggle {
        float: right;
        width: 86px;
        height: 86px;
        padding: 22px;
        margin-right: 20px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    
    @media screen and (max-width: 600px) {
        .search-toggle {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 0;
        }
    }
    
    input[type="search"] {
        box-sizing: border-box;
        width: 100%;
    }
    .search-box-wrapper {
        z-index: 2;
        width: 100%;
        display: none;
    }
    .search-box {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background: #000;
    }
    .search-box .search-field {
        max-width: 392px;
        float: right;
        padding: 1rem 2rem 1rem 4rem;
        font-size: 20px;
        font-size: 2rem;
        background-color: #fff;
        border: 0;
    }
    
    .error404 .search-submit,
    .search .search-submit,
    .search-box .search-submit {
        display: none;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you replicate the issue using a sandbox like JSfiddle? You want to make it as easy as possible for volunteers to help you

    Thread Starter thisguynelson

    (@thisguynelson)

    Hmmm, I’m not really sure how to do that. I tried to paste the html, css, and js into the JSfiddle but I just got a static black box.

    Essentially, I would just like to know what the JS would look like to have a slide left, not a slide down.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘.slideToggle Javascript issue with search form’ is closed to new replies.