.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.